How to make a polygon object zoom-in and zoom-out 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.

Syntax

canvas.on("mouse:wheel", callbackFunction);

Example 1: Applying zoom Controls on a Polygon Object

Let’s see a code example of how we can apply zoom controls on a Polygon object. We can move the mouse wheel to zoom-in or zoom-out. We have added event listener to listen for mouse scroll and update the zoom value respectively using setZoom.

<!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>Applying zoom controls on a Polygon object</h2>
   <p>You can move the mouse wheel to zoom-in or zoom-out</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: 50 },
            { x: 50, y: 0 },
            { x: 0, y: 0 },
         ],
         {
            left: 30,
            fill: "#aa98a9",
            stroke: "#002e63",
            strokeWidth: 2,
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
      
      // Using mouse:wheel event
      canvas.on("mouse:wheel", function (options) {
         
         // Get the wheel scroll value
         var delta = options.e.deltaY;
         
         // Get the current zoom value
         var zoom = canvas.getZoom();
         
         // Update the current zoom value
         zoom = (0.999 ** delta) * zoom;
         
         // Set the current zoom value
         canvas.setZoom(zoom);
         options.e.preventDefault();
         options.e.stopPropagation();
      });
   </script>
</body>
</html>

Example 2: Applying zoom Controls on a Rectangle Object

Let’s see a code example to understand how we apply zoom controls in other objects such as Rectangle. We have initialized a rectangle object of width as 100px and height as 60px. We can move the mouse wheel to zoom-in or zoom-out.

<!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>Applying zoom controls on a Rectangle object</h2>
   <p>You can move the mouse wheel to zoom-in or zoom-out</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 rectangle instance
      var rectangle = new fabric.Rect({
         height: 60,
         width: 100,
         left: 30,
         fill: "#aa98a9",
         stroke: "#002e63",
         strokeWidth: 2,
      });
      
      // Adding it to the canvas
      canvas.add(rectangle);
      
      // Using mouse:wheel event
      canvas.on("mouse:wheel", function (options) {
         
         // Get the wheel scroll value
         var delta = options.e.deltaY;
         
         // Get the current zoom value
         var zoom = canvas.getZoom();
         
         // Update the current zoom value
         zoom = (0.999 ** delta) * zoom;
         
         // Set the current zoom value
         canvas.setZoom(zoom);
         options.e.preventDefault();
         options.e.stopPropagation();
      });
   </script>
</body>
</html>