Comment faire réagir un objet polygone aux événements d'inclinaison à l'aide de FabricJS ?-js tutoriel-php.cn

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

WBOY

Libérer： 2023-09-16 09:17:14

avant

1007 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 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);

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!