How to make a polygon object react to the scaling event using FabricJS?


We can create a Polygon object by creating an instance of fabric.Polygon. A polygon object can be characterized by 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 like angle, opacity etc. We use the scaling event to demonstrate how a polygon object reacts to being scaled.

Syntax

polygon.on(“scaling”, callbackFunction);

Example 1: Displaying how the Object Reacts to the scaling Event

Let’s see a code example of how the polygon object reacts when the scaling event occurs. We can scale the object by dragging any of the corner controls. Here, the scaling event will be fired continuously when the object is being scaled.

<!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 scaling event</h2>
   <p>
      You can scale the polygon object and open the console from dev tools 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: 0, y: 0 },
            { x: 0, y: 50 },
            { x: 50, y: 50 },
            { x: 50, y: 0 },
         ],
         {
            left: 100,
            top: 30,
            fill: "red",
            stroke: "blue",
            strokeWidth: 3,
            objectCaching: false,
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
      
      // Using the scaling event
      polygon.on("scaling", () => {
         canvas.renderAll();
         console.log("The object is being scaled");
      });
   </script>
</body>
</html>

Example 2: Changing the Stroke Colour when Scaling Happens

Let’s see a code example to understand how we can change the stroke colour when the scaling event occurs. We have used the set method to set the stroke colour of the polygon as “orange”. Therefore, when we scale the object, its stroke colour will change to orange.

<!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 stroke colour when scaling happens</h2>
   <p>
      You can see that the stroke colour changes when the polygon is scaled
   </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: 5,
            objectCaching: false,
            top: 50,
            left: 30,
            scaleX: 0.5,
            scaleY: 0.5
         }
      );

      // Adding it to the canvas
      canvas.add(polygon);

      // Using the scaling event
      polygon.on("scaling", () => {
         polygon.set("stroke", "orange")
         canvas.renderAll();
      });
   </script>
</body>
</html>

Conclusion

In this tutorial, we used two simple examples to demonstrate how you can make a polygon object react to the scaling event using FabricJS.

Updated on: 02-Jan-2023

201 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements