Maison > Article > interface Web > Comment faire réagir un objet polygone aux événements d'inclinaison à l'aide de FabricJS ?

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

WBOYavant: 2023-09-16 09:17:141032parcourir

如何使用 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 skewing pour démontrer comment les objets polygonaux réagissent à l'utilisateur lorsqu'ils sont manipulés. En contrôlant l'inclinaison.

Grammaire

polygon.on("skewing", callbackFunction);

Exemple 1 : Montrez comment un objet répond aux événements d'inclinaison

Regardons un exemple de code pour voir comment un objet polygone réagit lors de l'utilisation de l'événement Tilt. Vous pouvez incliner un objet horizontalement et verticalement en appuyant sur la touche Maj, puis en faisant glisser la commande du milieu horizontalement ou verticalement. Lorsque l'objet est incliné, l'événement d'inclinaison se déclenche 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 skewing event</h2>
   <p>
      You can keep skewing the object while the console from dev tools is open 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: 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 skewing event
      polygon.on("skewing", () => {
         canvas.renderAll();
         console.log("The polygon object is being skewed");
      });
   </script>
</body>
</html>

Exemple 2 : Changer la couleur de remplissage en cas d'inclinaison

Regardons un exemple de code pour voir comment changer la couleur de remplissage lorsqu'un événement tilt se produit. Nous avons utilisé la méthode set, qui est un setter qui nous permet de spécifier la propriété que nous souhaitons modifier. Ici, chaque fois que nous inclinons le polygone, 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 skew happens</h2>
   <p>
      You can see that the fill colour changes when the polygon is skewed
   </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 skewing event
      polygon.on("skewing", () => {
         polygon.set("fill", "green")
         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 d'inclinaison à 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!

对象事件 fabric

Déclaration：

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

Article précédent：Comment fonctionne l'API Javascript Canvas dans les principaux navigateursArticle suivant：Comment fonctionne l'API Javascript Canvas dans les principaux navigateurs

Articles Liés

Voir plus