Maison >interface Web >js tutoriel >Comment faire réagir un objet polygone aux événements de zoom à l'aide de FabricJS ?

Comment faire réagir un objet polygone aux événements de zoom à l'aide de FabricJS ?

WBOYavant: 2023-08-29 11:57:06920parcourir

如何使用 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 utilisons l'événement scaling pour démontrer comment les objets polygonaux réagissent à la mise à l'échelle.

Grammaire

polygon.on(“scaling”, callbackFunction);

Exemple 1 : Montrez comment un objet répond aux événements de zoom

Regardons un exemple de code pour voir comment un objet polygone réagit lorsqu'un événement zoom se produit. Nous pouvons redimensionner l'objet en faisant glisser n'importe quel contrôle de coin. Ici, lorsque l'objet est mis à l'échelle, l'événement de mise à l'échelle sera déclenché en continu.

<!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 scaling event</h2>
   <p>
      You can scale the polygon object and open the console from dev tools to see the logged output
   </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: 0, y: 0 },
            { x: 0, y: 50 },
            { x: 50, y: 50 },
            { x: 50, y: 0 },
         ],
         {
            left: 100,
            top: 30,
            fill: "red",
            stroke: "blue",
            strokeWidth: 3,
            objectCaching: false,
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
      
      // Using the scaling event
      polygon.on("scaling", () => {
         canvas.renderAll();
         console.log("The object is being scaled");
      });
   </script>
</body>
</html>

Exemple 2 : Changer la couleur du trait lors du zoom

Regardons un exemple de code pour voir comment changer la couleur du trait lorsqu'un événement zoom se produit. Nous utilisons la méthode set pour définir la couleur du trait du polygone sur "orange". Ainsi, lorsque nous redimensionnons l'objet, la couleur de son trait passe à l'orange.

<!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 stroke colour when scaling happens</h2>
   <p>
      You can see that the stroke colour changes when the polygon is scaled
   </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: 5,
            objectCaching: false,
            top: 50,
            left: 30,
            scaleX: 0.5,
            scaleY: 0.5
         }
      );

      // Adding it to the canvas
      canvas.add(polygon);

      // Using the scaling event
      polygon.on("scaling", () => {
         polygon.set("stroke", "orange")
         canvas.renderAll();
      });
   </script>
</body>
</html>

Conclusion

Dans ce didacticiel, nous utilisons deux exemples simples pour montrer comment faire réagir un objet polygone aux événements de zoom à 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!

Déclaration：

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

Article précédent：Premiers pas avec Paper.js : création d'images animéesArticle suivant：Premiers pas avec Paper.js : création d'images animées

Articles Liés

Voir plus