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

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

WBOY

Libérer： 2023-08-31 08:05:02

avant

912 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 rotating pour démontrer comment faire réagir un objet polygonal à la rotation via les contrôles.

Grammaire

polygon.on(“rotating”, callbackFunction);

Copier après la connexion

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

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>

Copier après la connexion

Exemple 2 : Changer la couleur de remplissage lors de la rotation

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>

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 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!