En quoi les polygones sont-ils différents des polylignes dans FabricJS ?-js tutoriel-php.cn

En quoi les polygones sont-ils différents des polylignes dans FabricJS ?

王林

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

avant

1143 Les gens l'ont consulté

FabricJS 中的多边形与折线有何不同？

Nous pouvons créer des objets Polyline en créant des instances de fabric.Polyline, tandis que fabric.Polygon peut être utilisé pour créer des instances de Polygon. Un objet polyligne peut être représenté par un ensemble de segments de ligne droite connectés. Puisqu'il s'agit de l'un des éléments de base de FabricJS, nous pouvons également le personnaliser facilement en appliquant des propriétés telles que l'angle, l'opacité, etc.

Les polygones relient toujours le premier point au dernier point pour former une zone fermée, contrairement aux polylignes. Cela peut être démontré par l’exemple donné ci-dessous.

Grammaire

new fabric.Polyline(points: Array, options: Object)

Copier après la connexion

Paramètres

points - Ce paramètre accepte un Array, qui représente le tableau de points qui composent l'objet polyligne.
Options (facultatif) - Ce paramètre est un objet qui apporte une personnalisation supplémentaire à notre objet. Utilisez ce paramètre pour modifier l'origine, la largeur du trait et de nombreuses autres propriétés associées à l'objet Polyligne.

Exemple 1

Créez une instance Fabric.Polyline() et ajoutez-la au canevas

Regardons un exemple de code pour voir comment ajouter un objet polyligne au canevas. Le seul paramètre obligatoire est le tableau points, tandis que le deuxième paramètre est un objet options facultatif. De plus, nous utiliserons le même tableau points dans un polygone pour démontrer la différence.

<!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>Creating an instance of fabric.Polyline() and adding it to our canvas</h2>
   <p>You can see that the polyline object doesn’t connects start to end</p>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating a points array
      var points = [
         { x: 200, y: 150 },
         { x: 0, y: 100 },
         { x: 100, y: 0 },
         { x: 200, y: 100 },
      ];
      
      // Initiating a polyline object
      var polyline = new fabric.Polyline(points, {
         left: 100,
         top: 40,
         fill: "white",
         strokeWidth: 4,
         stroke: "green",
      });
      
      // Adding it to the canvas
      canvas.add(polyline);
   </script>
</body>
</html>

Copier après la connexion

Exemple 2

Créez une instance de fabric.Polygon() et ajoutez-la à notre toile

Regardons un exemple de code pour voir comment ajouter un objet polygone au canevas. Le seul paramètre obligatoire est le tableau points, tandis que le deuxième paramètre est un objet d'options facultatif, nous fournirons le même objet d'options que dans l'exemple de polyligne.

<!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>Creating an instance of fabric.Polygon() and adding it to our canva</h2>
   <p>You can see that the polygon object connects start to end to make a closed area</p>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating a points array
      var points = [
         { x: 200, y: 150 },
         { x: 0, y: 100 },
         { x: 100, y: 0 },
         { x: 200, y: 100 },
      ];
      
      // Initiating a polyline object
      var polygon = new fabric.Polygon(points, {
         left: 100,
         top: 40,
         fill: "white",
         strokeWidth: 4,
         stroke: "green",
      });
      
      // Adding it to the canvas
      canvas.add(polygon);
   </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!