Heim > Artikel > Web-Frontend > Wie erhalte ich die Deckkraft eines Bildobjekts mit FabricJS?
Wie erhalte ich die Deckkraft eines Bildobjekts mit FabricJS?
- WBOYnach vorne
- 2023-08-28 16:49:091264Durchsuche
In diesem Tutorial erfahren wir, wie wir mit FabricJS die Deckkraft eines Bildes ermitteln. Wir können ein Image-Objekt erstellen, indem wir eine Instanz von fabric.Image erstellen. Da es eines der Grundelemente von FabricJS ist, können wir es auch einfach anpassen, indem wir Eigenschaften wie Winkel, Deckkraft usw. anwenden. Um die Deckkraft eines Bildes zu ermitteln, verwenden wir die Methode getObjectOpacity. p>
Grammatik
getObjectOpacity(): Number
Verwenden Sie die Methode getObjectOpacity
BeispielSehen wir uns ein Codebeispiel an, um die protokollierte Ausgabe bei Verwendung der Methode
getObjectOpacity zu sehen. In diesem Fall wird in der Konsole die Standard-Deckkraft von 1 angezeigt.
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Using the getObjectOpacity method</h2>
<p>
You can open console from dev tools and see that the logged value is
being displayed in the console
</p>
<canvas id="canvas"></canvas>
<img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating the image element
var imageElement = document.getElementById("img1");
// Initiate an Image object
var image = new fabric.Image(imageElement, {
top: 50,
left: 110,
});
// Add it to the canvas
canvas.add(image);
// Using getObjectOpacity method
console.log("The opacity is: ", image.getObjectOpacity());
</script>
</body>
</html>
Verwenden Sie die Methode getObjectOpacity und übergeben Sie die Eigenschaft opacity
BeispielSehen wir uns ein Codebeispiel an, um die protokollierte Ausgabe zu sehen, wenn die Methode
getObjectOpacity in Verbindung mit der Eigenschaft opacity verwendet wird. In diesem Beispiel wird der Deckkraft des Bildobjekts 0,7 zugewiesen, sodass die aufgezeichnete Ausgabe 0,7 beträgt.
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Using the getObjectOpacity method and passing the opacity property</h2>
<p>
You can open console from dev tools and see that the opacity value is being displayed in the console
</p>
<canvas id="canvas"></canvas>
<img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating the image element
var imageElement = document.getElementById("img1");
// Initiate an Image object
var image = new fabric.Image(imageElement, {
top: 50,
left: 110,
opacity: 0.7,
});
// Add it to the canvas
canvas.add(image);
// Using getObjectOpacity method
console.log("The opacity is: ", image.getObjectOpacity());
</script>
</body>
</html>
Das obige ist der detaillierte Inhalt vonWie erhalte ich die Deckkraft eines Bildobjekts mit FabricJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!