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 get the object scale factor of Image using FabricJS?
In this tutorial, we are going to learn how to get the object scale factor of Image using FabricJS. We can create an Image object by creating an instance of fabric.Image. 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 get the object scale factor of Image, we use the getObjectScaling method.
Syntax
getObjectScaling(): Object
Parameters
The getObjectScaling method does not take any parameters.
Return Value
This method returns an object containing the scale factors:
-
scaleX: Horizontal scale factor -
scaleY: Vertical scale factor
Using the getObjectScaling Method
Let's see a code example to see the logged output when the getObjectScaling method is used. In this case, the default scaleX and scaleY values will be displayed in the console which are 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 getObjectScaling method</h2>
<p>
You can open console from dev tools and see that the logged value is being displayed in the console
</p>
<canvas id="canvas"></canvas>
<img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating the image element
var imageElement = document.getElementById("img1");
// Initiate an Image object
var image = new fabric.Image(imageElement, {
top: 50,
left: 110,
});
// Add it to the canvas
canvas.add(image);
// Using getObjectScaling method
console.log("The scale factor is", image.getObjectScaling());
</script>
</body>
</html>
The scale factor is {scaleX: 1, scaleY: 1}
Using the getObjectScaling Method with Custom Scale Properties
Let's see a code example to see the logged output when the getObjectScaling method is used in conjunction with the scaleX property. In this case, the scaleX value of the image object will be displayed as 2 while the scaleY value will remain the same.
<!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 getObjectScaling method and passing the scaleX property</h2>
<p>
You can open console from dev tools and see that the logged value is being displayed in the console
</p>
<canvas id="canvas"></canvas>
<img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating the image element
var imageElement = document.getElementById("img1");
// Initiate an Image object
var image = new fabric.Image(imageElement, {
top: 50,
left: 110,
scaleX: 2,
});
// Add it to the canvas
canvas.add(image);
// Using getObjectScaling method
console.log("The scale factor is", image.getObjectScaling());
</script>
</body>
</html>
The scale factor is {scaleX: 2, scaleY: 1}
Key Points
- The
getObjectScalingmethod returns the current scale factors of an image object - Default scale values are 1 for both X and Y axes
- Scale factors can be set during object creation or modified later
- The method is useful for getting the current transformation state of image objects
Conclusion
The getObjectScaling method in FabricJS provides an easy way to retrieve the scale factors of image objects. This method is particularly useful when you need to track or manipulate the scaling properties of images on the canvas.
236 Views
