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:14770Durchsuche

FabricJS – 如何从其对象表示创建fabric.Image 的实例？

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!

Object 回调函数对象 fabric

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie stelle ich den vertikalen Skalierungsfaktor einer Ellipse mit FabricJS ein?Nächster Artikel：Wie stelle ich den vertikalen Skalierungsfaktor einer Ellipse mit FabricJS ein?

In Verbindung stehende Artikel

Mehr sehen