Comment obtenir une représentation SVG d'une ligne en utilisant FabricJS ?-js tutoriel-php.cn

Comment obtenir une représentation SVG d'une ligne en utilisant FabricJS ?

王林

Libérer： 2023-08-31 17:57:11

avant

1205 Les gens l'ont consulté

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

Dans cet article, nous apprendrons comment obtenir la représentation SVG d'une ligne à l'aide de FabricJS. L'élément Line est l'un des éléments de base fournis dans FabricJS. Il est utilisé pour créer des lignes droites. Étant donné que les éléments de ligne sont géométriquement unidimensionnels et ne contiennent aucun intérieur, ils ne sont jamais remplis. Nous pouvons créer un objet ligne en créant une instance de fabric.Line, en spécifiant les coordonnées x et y de la ligne et en l'ajoutant au canevas. Pour obtenir la représentation SVG d'un objet Line, nous utilisons la méthode _toSVG.

Syntaxe

 _toSVG(): Array

Copier après la connexion

Ne pas utiliser la méthode _toSVG

Exemple

Regardons un exemple de code pour voir la sortie enregistrée lorsque la méthode _toSVG n'est pas utilisée. La méthode _toSVG renvoie un tableau de chaînes contenant la représentation svg spécifique de l'instance. Cependant, comme nous n'utilisons pas la méthode _toSVG, nous ne pourrons pas voir le tableau de chaînes dans la console. Les valeurs par défaut des objets Line sont documentées pour illustrer ce point.

<!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>

Copier après la connexion

Utilisez la méthode _toSVG

Exemple

Dans cet exemple, nous utilisons la méthode _toSVG pour obtenir un tableau de chaînes contenant la représentation svg de l'objet.

<!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>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!