Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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.
To implement zoom functionality, we use the mouse:wheel event listener which detects mouse wheel movements and adjusts the canvas zoom level accordingly.
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>
How the Zoom Mechanism Works
The zoom functionality works by:
-
Event Detection: The
mouse:wheelevent captures mouse wheel movements -
Delta Value:
options.e.deltaYprovides the scroll direction and intensity -
Zoom Calculation: The formula
(0.999 ** delta) * zoomcreates smooth zoom increments -
Canvas Update:
setZoom()applies the new zoom level to the entire canvas
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>
Key Points
- The zoom functionality affects the entire canvas, not individual objects
- Use
preventDefault()andstopPropagation()to prevent default browser scrolling - The zoom factor
0.999can be adjusted for different zoom sensitivity - Both polygon and rectangle objects respond identically to canvas zoom operations
Conclusion
In this tutorial, we demonstrated how to implement zoom functionality for polygon objects using FabricJS. The mouse wheel event listener provides smooth zoom controls that work consistently across different fabric objects on the canvas.
992 Views
