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

Wie erstelle ich mit FabricJS eine String-Darstellung eines Line-Objekts?

WBOY

Freigeben： 2023-08-28 17:21:08

nach vorne

907 Leute haben es durchsucht

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

In diesem Tutorial lernen wir, wie man mit FabricJS eine String-Darstellung eines Line-Objekts erstellt. Das Linienelement ist eines der Grundelemente, die in FabricJS bereitgestellt werden. Es wird verwendet, um gerade Linien zu erstellen. Da Linienelemente geometrisch eindimensional sind und keine Innenräume enthalten, werden sie nie gefüllt. Wir können ein Linienobjekt erstellen, indem wir eine fabric.Line-Instanz erstellen, die x- und y-Koordinaten der Linie angeben und sie der Leinwand hinzufügen. Um eine String-Darstellung eines Line-Objekts zu erstellen, verwenden wir die Methode toString.

Syntax

 toString(): String

Nach dem Login kopieren

Verwendung der toString-Methode

Beispiel

Sehen wir uns ein Codebeispiel an, um die protokollierte Ausgabe bei Verwendung der toString-Methode zu sehen. In diesem Fall wird eine String-Darstellung der Linieninstanz 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 line instance
   </p>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiate a Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using the toString method
      console.log(
         "String representation of the Line instance is: ",
         line.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 vergleicht, indem man sich ihre jeweiligen Zeichenfolgendarstellungen ansieht. Hier initialisieren wir eine Linieninstanz und eine Rechteckinstanz. Wenn wir die toString-Methode auf jedes Objekt anwenden, können wir ihre jeweiligen String-Darstellungen in der Konsole sehen.

<!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 line instance and the rectangle instance
   </p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      // Initiate a Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
      });
      // Initiate a Rectangle object
      var rect = new fabric.Rect( {
         stroke: "red",
         strokeWidth: 20,
         width:20,
         height: 50,
         left: 400,
         top: 55
      });
      // Add them to the canvas
      canvas.add(line);
      canvas.add(rect)
      // Using the toString method
      console.log(
         "String representation of the Line instance is: ", line.toString()
      );
      console.log(
         "String representation of the Rectangle instance is: ",
         rect.toString()
      );
   </script>
</body>
</html>

Nach dem Login kopieren

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