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

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

WBOY
Libérer: 2023-08-31 17:49:08
avant
1041 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

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!

source:tutorialspoint.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal