Wie erstelle ich mit FabricJS eine Objektdarstellung eines Bildobjekts?-js-Tutorial-php.cn

Wie erstelle ich mit FabricJS eine Objektdarstellung eines Bildobjekts?

王林

Freigeben： 2023-08-23 20:53:02

nach vorne

1358 Leute haben es durchsucht

如何使用 FabricJS 创建图像对象的对象表示？

In diesem Tutorial lernen wir, wie man eine Objektdarstellung eines Bildes erstellt Objekte mit FabricJS. Wir können ein Bildobjekt erstellen, indem wir eine Instanz erstellen Stoff.Bild. Da es eines der Grundelemente von FabricJS ist, können wir es auch problemlos Passen Sie es an, indem Sie Eigenschaften wie Winkel, Deckkraft und mehr anwenden. Um ein Objekt zu erstellen Um ein Bildobjekt darzustellen, verwenden wir die Methode toObject.

Grammatik

toObject(propertiesToInclude: Array): Object

Nach dem Login kopieren

Parameter

propertiesToInclude – Dieser Parameter akzeptiert ein Array, das beliebige enthält Zusätzliche Attribute, die wir möglicherweise in die Ausgabe einbeziehen möchten. Dieser Parameter ist Optional.

Verwenden Sie die toObjectMethode

Beispiel

Sehen wir uns ein Codebeispiel an, um die protokollierte Ausgabe bei Verwendung der Methode toObject zu sehen. In diesem Fall wird eine Objektdarstellung der Image-Instanz zurückgegeben.

<!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 toObject method</h2>
   <p>
      You can open console from dev tools and see that the logged output contains the Object representation of the image instance
   </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 the toObject method
      console.log(
         "Object representation of the Image instance is: ",
         image.toObject()
      );
   </script>
</body>
</html>

Nach dem Login kopieren

Fügen Sie zusätzliche Eigenschaften mit der toObject-Methode

hinzu

Beispiel

Schauen wir uns ein Codebeispiel an, um zu sehen, wie es verwendet wird toObject-Methode. In diesem Beispiel haben wir eine benutzerdefinierte Eigenschaft namens hinzugefügt „Eigenschaftsname“. Wir können bestimmte Eigenschaften an die fabric.Image-Instanz übergeben, wie unten gezeigt zweiten Parameter im Optionsobjekt und übergeben Sie denselben Schlüssel an die toObject-Methode.

<!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 toObject method to add additional properties</h2>
   <p>
      You can open console from dev tools and see that the logged output contains added property called PropertyName
   </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 with PropertyName key
      // passed in options object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
         PropertyName: "property",
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using the toObject method
      console.log(
         "Object representation of the Image instance is: ",
         image.toObject(["PropertyName"])
      );
   </script>
</body>
</html>

Nach dem Login kopieren

Fazit

In diesem Tutorial zeigen wir anhand zweier Beispiele, wie man Objekte erstellt Verwenden Sie FabricJS, um Bilder darzustellen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit FabricJS eine Objektdarstellung eines Bildobjekts?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!