- Trending Categories
- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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>
Conclusion
In this tutorial, we used two simple examples to demonstrate how you can make a polygon object zoom-in and zoom-out using FabricJS.