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

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

PHPz

Release： 2023-08-24 12:53:02

forward

1473 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 object:modified event to make the polygon object react to resizing.

grammar

object:modified

Copy after login

Example 1: Default appearance of polygon objects

Let's look at a code example to see how a polygon object displays when the object:modified event is not used. In this case, the polygon object will be added to the canvas.

<!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>Default appearance of the polygon object</h2>
   <p>You can see that the polygon object has been added to the canvas</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: 2,
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
   </script>
</body>
</html>

Copy after login

Example 2: Displaying an object's reaction to resizing

Let's look at a code example to see the output logged when a polygon object is resized. We used the object:modified event, which fires at the end of any object transformation or any change related to the object. In this case, every time we change the scale of the object, the scaled height and width will be logged to the console.

<!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 being resized</h2>
   <p>
      You can scale object using corner and open console from dev tools to see that the scaled width and height value of the polygon object is being logged
   </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: 2,
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
      
      // Using object:modified event
      canvas.on("object:modified", (e) => {
         canvas.getActiveObjects().forEach((o) => { 
            console.log(
               "Scaled Height of the polygon is: ",
               o.getScaledHeight(),
               "Scaled Width of the polygon is:",
               o.getScaledWidth()
            );
         });
      });
   </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 resize events using FabricJS.

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