Wie erhalte ich mit FabricJS eine SVG-Darstellung einer Linie?-js-Tutorial-php.cn

Wie erhalte ich mit FabricJS eine SVG-Darstellung einer Linie?

王林

Freigeben： 2023-08-31 17:57:11

nach vorne

1243 Leute haben es durchsucht

如何使用 FabricJS 获取线条的 SVG 表示？

In diesem Artikel erfahren Sie, wie Sie mit FabricJS die SVG-Darstellung einer Linie erhalten. 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 Instanz von fabric.Line erstellen, die x- und y-Koordinaten der Linie angeben und sie der Leinwand hinzufügen. Um die SVG-Darstellung eines Linienobjekts zu erhalten, verwenden wir die Methode _toSVG.

Syntax

 _toSVG(): Array

Nach dem Login kopieren

Die Methode _toSVG wird nicht verwendet. Die Methode

_toSVG

gibt ein String-Array zurück, das die spezifische SVG-Darstellung der Instanz enthält. Da wir jedoch nicht die Methode

_toSVG

verwenden, können wir das String-Array nicht in der Konsole sehen. Zur Veranschaulichung dieses Punktes werden die Standardwerte für Linienobjekte dokumentiert.

<!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 _toSVG method</h2>
   <p>You can open console from dev tools and see the logged output</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([70, 100, 150, 200], {
         stroke: "blue",
      });
      // Add it to the canvas
      canvas.add(line);
      
      // Console logging the Line object
      console.log("The Line object is as follows: ", line);
   </script>
</body>
</html>

Nach dem Login kopieren

Verwenden Sie die _toSVG-Methode Beispiel

In diesem Beispiel verwenden wir die Methode _toSVG, um ein String-Array zu erhalten, das die SVG-Darstellung des Objekts enthält.

<!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 _toSVG method</h2>
   <p>
      You can open console from dev tools and see that the logged output contains an array of strings containing the svg representation of the Line object
   </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([70, 100, 150, 200], {
         stroke: "blue",
      });
     
     // Add it to the canvas
      canvas.add(line);
      
      // Using the _toSVG method
      console.log(
         "The svg representation of the Line object is as follows: ",
         line._toSVG()
      );
   </script>
</body>
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie erhalte ich mit FabricJS eine SVG-Darstellung einer Linie?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!