Comment ajouter des coordonnées dans un polygone en utilisant FabricJS ?-js tutoriel-php.cn

Comment ajouter des coordonnées dans un polygone en utilisant FabricJS ?

PHPz

Libérer： 2023-08-24 14:33:02

avant

1118 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. Nous pouvons ajouter des coordonnées dans un polygone en utilisant l'attribut points.

Grammaire

new fabric.Polygon( points: Array, { points: Array }: 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 polygone.
Options (facultatif) - Ce paramètre est un objet qui fournit une personnalisation supplémentaire à notre objet. En utilisant ce paramètre, vous pouvez modifier l'origine, la largeur du trait et de nombreuses autres propriétés associées à l'objet Polygon dont points est la propriété.

Touche d'option

points - Cette propriété accepte un Array qui nous permet de définir un tableau de points.

Exemple 1 : apparence par défaut des objets polygonaux

Regardons un exemple de code pour voir comment ajouter un objet polygone au canevas. Dans cet exemple, nous n'utilisons pas l'attribut points. Nous avons spécifié un tableau de points comme premier paramètre lui-même, qui représente les valeurs de coordonnées à utiliser.

<!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>Default appearance of Polygon object</h2>
   <p>You can see the 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 : Utilisation de la propriété Points

Dans cet exemple, nous avons utilisé l'attribut point et lui avons attribué un array composé des valeurs de coordonnées du polygone, où chaque point est un objet avec une valeur "x" et "y". Comme vous pouvez le voir, bien que nous ayons spécifié les points de l'objet Polygon, une fois que nous utilisons les propriétés du point, il écrase les valeurs et utilise les nouvelles coordonnées.

<!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 points property</h2>
   <p>You can see the Polygon object's coordinates have changed</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: 0, y: 30 },
         { x: 30, y: 30 },
         { x: 30, y: 0 },
         { x: 0, y: 0 },
      ];
      
      // Initiating a polygon object
      var polygon = new fabric.Polygon(points, {
         top: 50,
         left: 50,
         points: [
            { x: 0, y: 70 },
            { x: 70, y: 70 },
            { x: 70, y: 0 },
            { x: 0, y: 0 },
         ],
      });
      
      // Adding it to the canvas
      canvas.add(polygon);
   </script>
</body>
</html>

Copier après la connexion