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

Wie erstelle ich mit FabricJS eine String-Darstellung eines Bildobjekts?

WBOY

Freigeben： 2023-08-23 18:21:05

nach vorne

744 Leute haben es durchsucht

如何使用 FabricJS 创建图像对象的字符串表示形式？

In diesem Tutorial zeigen wir Ihnen, wie Sie eine String-Darstellung erstellen Bildobjekt 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 eine Zeichenfolge zu erstellen Zur Darstellung von Bildobjekten verwenden wir die Methode toString.

Grammatik

toString(): String

Nach dem Login kopieren

Verwenden Sie die toString-Methode

Beispiel

Sehen wir uns ein Codebeispiel an, um die protokollierte Ausgabe bei Verwendung der Methode toString zu sehen. existieren In diesem Fall wird eine String-Darstellung der Bildinstanz 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 toString method</h2>
   <p>
      You can open console from dev tools and see that the logged output contains the String 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 toString method
      console.log(
         "String representation of the Image instance is: ",
         image.toString()
      );
   </script>
</body>
</html>

Nach dem Login kopieren

Verwenden Sie die Methode toString, um zwei verschiedene Elemente zu vergleichen

Beispiel

Schauen wir uns ein Codebeispiel an, um zu sehen, wie man zwei Objekte durch Betrachten vergleicht ihre jeweiligen String-Darstellungen. Hier initialisieren wir eine Image-Instanz und eine Rechteckige Instanz. Wenn wir die Methode toString auf jedes Objekt anwenden, können wir dessen sehen Die jeweilige String-Darstellung in der Konsole.

<!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 toString method to compare two different elements</h2>
   <p>
      You can open console from dev tools and see that the logged output contains the String representation of the Image instance and the rectangle 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,
      });
      
      // Initiate a Rectangle object
      var rect = new fabric.Rect({
         stroke: "red",
         strokeWidth: 20,
         width: 20,
         height: 50,
         left: 460,
         top: 55,
      });
      
      // Add them to the canvas
      canvas.add(image);
      canvas.add(rect);
      
      // Using the toString method
      console.log(
         "String representation of the Image instance is: ",
         image.toString()
      );
      console.log(
         "String representation of the Rectangle instance is: ",
         rect.toString()
      );
   </script>
</body>
</html>

Nach dem Login kopieren

Fazit

In diesem Tutorial zeigen wir anhand von zwei Beispielen, wie man eine Zeichenfolge erstellt Verwenden Sie FabricJS, um Bildobjekte darzustellen.

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