Heim > Artikel > Web-Frontend > FabricJS – Wie erstelle ich eine Instanz von fabric.Image aus seiner Objektdarstellung?
FabricJS – Wie erstelle ich eine Instanz von fabric.Image aus seiner Objektdarstellung?
- WBOYnach vorne
- 2023-08-25 21:17:14718Durchsuche
In diesem Tutorial zeigen wir Ihnen, wie Sie eine Instanz von Fabric.Image erstellen Erhalten aus seiner Objektdarstellung mit FabricJS. Wir können ein Bildobjekt erstellen, indem wir Erstellen Sie eine Instanz von fabric.Image. Da es eines der Grundelemente von FabricJS ist, Wir können es auch einfach anpassen, indem wir Eigenschaften wie Winkel, Deckkraft usw. anwenden. Um eine Instanz von fabric.Image aus seiner Objektdarstellung zu erstellen, verwenden wir fromObject-Methode.
Grammatik
fromObject(object: Object, callback: function)
Parameter
object – Dieser Parameter akzeptiert ein Objekt, das das Objekt darstellt, von dem abgerufen werden soll Das Bild wird erstellt.
callback – Dieser Parameter ist eine Funktion, wenn das Bild Instanz erstellt.
Verwenden Sie nicht die fromObjectMethode
Beispiel
Schauen wir uns ein Codebeispiel an, um zu verstehen, wie ein Image-Objekt aussieht, wenn fromObject Methode wird nicht verwendet. In diesem Fall müssen wir nur eine Instanz von fabric.Image erstellen und Fügen Sie dies unserer Leinwand hinzu.
<!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>Without using the fromObject method</h2>
<p>You can see that the image object has been added to the canvas</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);
</script>
</body>
</html>
Verwenden Sie die fromObjectMethode
Beispiel
In diesem Beispiel haben wir die Methode fromObject verwendet, um zu zeigen, dass wir es können Bildobjekte können auch dann erstellt werden, wenn wir kein Bildelement haben. In diesem Fall wir Das Objekt, aus dem die Bildinstanz erstellt werden muss. nach Rufen Sie die Rückruffunktion auf und fügen Sie sie der Leinwand hinzu.
<!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 fromObject method</h2>
<p>You can see that the image has been added</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Using fromObject method
fabric.Image.fromObject({
type: "image",
version: "5.1.0",
originX: "left",
originY: "top",
left: 110,
src: "https://www.tutorialspoint.com/images/logo.png",
},
function(oImg) {
oImg.set("top", 50);
canvas.add(oImg);
}
);
</script>
</body>
</html>
Fazit
In diesem Tutorial zeigen wir anhand von zwei Beispielen, wie man eine Instanz erstellt Rufen Sie mithilfe von FabricJS ein Fabric.Image aus seiner Objektdarstellung ab.
Das obige ist der detaillierte Inhalt vonFabricJS – Wie erstelle ich eine Instanz von fabric.Image aus seiner Objektdarstellung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!