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.
553 Views
