How to make a polygon object react to rotation events using FabricJS?-JS Tutorial-php.cn

How to make a polygon object react to rotation events using FabricJS?

WBOY

Release： 2023-08-31 08:05:02

forward

901 people have browsed it

如何使用 FabricJS 使多边形对象对旋转事件做出反应？

We can create a Polygon object by creating an instance of fabric.Polygon. A polygon object can be characterized as any closed shape consisting of a set of connected straight line segments. Since it is one of the basic elements of FabricJS, we can also easily customize it by applying properties such as angle, opacity, etc. We use the rotating event to demonstrate how to make a polygonal object react to rotation through controls.

grammar

polygon.on(“rotating”, callbackFunction);

Copy after login

Example 1: Show how an object responds to rotation events

Let's look at a code example of how to make a polygon object react to rotation events. In this case, whenever we click on the polygon object and rotate it via the middle rotation control, we will see the recorded output. This is because the rotation event fires continuously as the object rotates.

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

Copy after login

Example 2: Changing fill color when rotation occurs

Let's look at a code example to see how to change the fill color when a rotate event occurs. We can use the middle rotation (mtr) control to rotate objects on the canvas. Here, when we rotate the polygon object using the mtr control, the fill color changes to "green".

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

Copy after login

in conclusion

In this tutorial, we use two simple examples to demonstrate how to make a polygon object react to rotation events using FabricJS.

The above is the detailed content of How to make a polygon object react to rotation events using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!