Comment créer une représentation sous forme de chaîne d'un objet Line à l'aide de FabricJS ?-js tutoriel-php.cn

Comment créer une représentation sous forme de chaîne d'un objet Line à l'aide de FabricJS ?

WBOY

Libérer： 2023-08-28 17:21:08

avant

925 Les gens l'ont consulté

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

Dans ce tutoriel, nous apprendrons comment créer une représentation sous forme de chaîne d'un objet Line à 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 fabric.Line, en spécifiant les coordonnées x et y de la ligne et en l'ajoutant au canevas. Pour créer une représentation sous forme de chaîne d'un objet Line, nous utilisons la méthode toString.

Syntaxe

 toString(): String

Copier après la connexion

Utilisation de la méthode toString

Exemple

Regardons un exemple de code pour voir la sortie enregistrée lors de l'utilisation de la méthode toString. Dans ce cas, une représentation sous forme de chaîne de l'instance de ligne est renvoyée.

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

Copier après la connexion

Utilisez la méthode toString pour comparer deux éléments différents

Exemple

Regardons un exemple de code pour voir comment comparer deux objets en examinant leurs représentations sous forme de chaîne respectives. Ici, nous initialisons une instance de ligne et une instance de rectangle. Lorsque nous appliquons la méthode toString à chaque objet, nous pouvons voir leurs représentations sous forme de chaîne respectives dans la console.

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

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!