Maison > Article > interface Web > Comment ajouter des coordonnées dans un polygone en utilisant 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.
new fabric.Polygon( points: Array, { points: Array }: Object )
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é.
points - Cette propriété accepte un Array qui nous permet de définir un tableau de points.
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>
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>
Dans ce tutoriel, nous utilisons deux exemples simples pour montrer comment ajouter des coordonnées dans un polygone à 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!