Maison > Article > interface Web > Comment créer un polygone avec des polylignes à l'aide de FabricJS ?

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

WBOYavant: 2023-08-31 17:49:081022parcourir

如何使用 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 )

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>

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>

Conclusion

Dans ce tutoriel, nous utilisons deux exemples simples pour montrer comment créer un polygone avec des polylignes à l'aide de FabricJS.

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!

Array 继承对象 fabric

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment trouver la complexité d'une instance Line à l'aide de FabricJS ?Article suivant：Comment trouver la complexité d'une instance Line à l'aide de FabricJS ?

Articles Liés

Voir plus