Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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 get the zoom level of a Canvas with Polyline object in FabricjS?
We can create a Polyline object by creating an instance of fabric.Polyline. A polyline object can be characterised by 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.
In order to find the current zoom level, we use the getZoom() method. This method returns a Number which represents the zoom level.
Syntax
getZoom(): Number
Example 1: Using the getZoom() Method
Let's see a code example of how we can find the zoom level of a canvas with polyline object by using the getZoom() method. We will log the value in the console. For this example, we will log the default value which is going to be 1.
<!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>Using the getZoom() method</h2>
<p> You can open Console from Dev tools and see the zoom level </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 polyline instance
var polyline = new fabric.Polyline(
[
{ x: 500, y: 20 },
{ x: 550, y: 60 },
{ x: 550, y: 200 },
{ x: 350, y: 200 },
{ x: 350, y: 60 },
],
{
fill: "white",
stroke: "blue",
strokeWidth: 2,
}
);
// Add it to the canvas
canvas.add(polyline);
// Using getZoom() method
var zoomLevel = canvas.getZoom();
console.log("Zoom Level: ", zoomLevel);
</script>
</body>
</html>
Example 2: Using the getZoom() Method and with a zoomed in Polyline
Let's see a code example in which we will set the zoom using setZoom() and then get the new zoom in value using the getZoom() method. We are passing the value 1.3 which will zoom in and will be visible in the output further the value will be there in the console also as 1.3.
<!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>Using the getZoom() method and with a zoomed in polyline</h2>
<p> You can open Console from Dev tools and see the zoom level </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 polyline instance
var polyline = new fabric.Polyline(
[
{ x: 500, y: 20 },
{ x: 550, y: 60 },
{ x: 550, y: 200 },
{ x: 350, y: 200 },
{ x: 350, y: 60 },
],
{
fill: "white",
stroke: "blue",
strokeWidth: 2,
}
);
// Add it to the canvas
canvas.add(polyline);
// Set the zoom level
canvas.setZoom(1.3);
// Using getZoom() method
var zoomLevel = canvas.getZoom();
console.log("Zoom Level: ", zoomLevel);
</script>
</body>
</html>
599 Views
