Comment créer un polygone avec des polylignes à l'aide de FabricJS ?-js tutoriel-php.cn

Comment créer un polygone avec des polylignes à l'aide de FabricJS ?

WBOY

Libérer： 2023-08-31 17:49:08

avant

1021 Les gens l'ont consulté

如何使用 FabricJS 创建带有折线的多边形？

Nous pouvons créer un objet Polygon en créant une instance de fabric.Polygon. Un objet polygone peut être caractérisé comme n’importe quelle forme fermée constituée d’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. Puisque Polygon étend fabric.Polyline, nous pouvons brillamment créer une instance de polygone en utilisant une polyligne.

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 un tableau de points qui composent un objet polygone, où chaque point est situé dans un objet avec x et y.
Options (facultatif) - Ce paramètre est un objet qui offre 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 Polygone.

Exemple 1 : créez une instance Fabric.Polygon() et ajoutez-la au canevas

Regardons un exemple de code montrant comment créer un polygone en créant une instance de fabric.Polygon. Puisque la classe Polygon étend fabric.Polyline, elle hérite de ses propriétés et méthodes, établissant une relation entre elles.

<!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 canvas
   </h2> 
   <p>You can see that a Polygon object has been added to the canvas</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 polygon object
      var polygon = new fabric.Polygon(
         [
            { x: -20, y: -35 },
            { x: 20, y: -35 },
            { x: 40, y: 0 },
            { x: 20, y: 35 },
            { x: -20, y: 35 },
            { x: -40, y: 0 },
         ],
         {
            top: 50,
            left: 50,
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
   </script>
</body>
</html>

Copier après la connexion

Exemple 2 : créez une instance Fabric.Polyline() et ajoutez-la au canevas

Regardons un exemple de code montrant comment créer un polygone en créant une instance de fabric.Polyline. Nous devons spécifier un tableau contenant les coordonnées x et y du polygone que nous voulons créer et ajouter toutes les propriétés facultatives à inclure dans l'objet options. Dans cet exemple, nous créons un carré, qui est un polygone avec quatre côtés égaux et quatre angles égaux.

<!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 a Polygon object has been added to the canvas</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 polyline object
      var polygon = new fabric.Polyline(
         [
            { x: 0, y: 0 },
            { x: 50, y: 0 },
            { x: 50, y: 50 },
            { x: 0, y: 50 },
         ],
         {
            top: 50,
            left: 50,
            fill: "green",
         }
      );
      
      // Adding it to the canvas 
      canvas.add(polygon);
   </script>
</body>
</html>

Copier après la connexion