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 utilisons l'événement rotating pour démontrer comment faire réagir un objet polygonal à la rotation via les contrôles.
polygon.on(“rotating”, callbackFunction);
Regardons un exemple de code montrant comment faire réagir un objet polygone à un événement rotation. Dans ce cas, chaque fois que nous cliquons sur l'objet polygone et le faisons pivoter via la commande de rotation du milieu, nous verrons la sortie enregistrée. En effet, l'événement de rotation se déclenche en continu pendant la rotation de l'objet.
<!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>Displaying how the object reacts to the rotating event</h2> <p>You can rotate the object to see the callback function fired</p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiate a polygon instance var polygon = new fabric.Polygon( [ { x: 500, y: 20 }, { x: 550, y: 60 }, { x: 550, y: 200 }, { x: 350, y: 200 }, { x: 350, y: 60 }, { x: 500, y: 20 }, ], { fill: "red", stroke: "blue", strokeWidth: 2, objectCaching: false, } ); // Adding it to the canvas canvas.add(polygon); // Using the rotating event polygon.on("rotating", () => { canvas.renderAll(); console.log("The polygon object is rotating"); }); </script> </body> </html>
Regardons un exemple de code pour voir comment changer la couleur de remplissage lorsqu'un événement rotate se produit. Nous pouvons utiliser le contrôle de rotation du milieu (mtr) pour faire pivoter les objets sur le canevas. Ici, lorsque nous faisons pivoter l'objet polygone à l'aide du contrôle mtr, la couleur de remplissage passe au "vert".
<!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>Changing the fill colour when rotate happens</h2> <p> You can see that the fill colour changes when the polygon is rotated </p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiate a polygon instance var polygon = new fabric.Polygon( [ { x: 500, y: 20 }, { x: 550, y: 60 }, { x: 550, y: 200 }, { x: 350, y: 200 }, { x: 350, y: 60 }, { x: 500, y: 20 }, ], { fill: "red", stroke: "blue", strokeWidth: 2, objectCaching: false, top: 50, left: 30, scaleX: 0.5, scaleY: 0.5 } ); // Adding it to the canvas canvas.add(polygon); // Using the rotating event polygon.on("rotating", () => { polygon.set("fill", "green") canvas.renderAll(); }); </script> </body> </html>
Dans ce didacticiel, nous utilisons deux exemples simples pour montrer comment faire réagir un objet polygone aux événements de rotation à 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!