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 set the angle of an Image using FabricJS?
In this tutorial, we are going to learn how to set the angle of an 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 set the angle of an Image, we use the angle property.
Syntax
new fabric.Image( element: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | String, { angle: Number }: Object, callback: function)
Parameters
-
element ? This parameter accepts HTMLImageElement, HTMLCanvasElement, HTMLVideoElement or String which denotes the image element. The String should be a URL and would be loaded as an image.
-
options (optional) ? This parameter is an Object which provides additional customizations to our object. Using this parameter origin, stroke width and a lot of other properties can be changed related to the image object of which angle is a property.
-
callback (optional) ? This parameter is a function which is to be called after eventual filters are applied.
Options Keys
-
angle ? This property accepts a Number that determines the angle of rotation of an object in degrees.
Default appearance of Image object
Let's see a code example of how the Image object appears when the angle property is not used.
<!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>Default appearance of Image object</h2>
<p>You can see the default appearance of Image object</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);
</script>
</body>
</html>
Using the angle property
In this example, we have used the angle property and assigned it a value of 60. This will make sure that our Image object has an angle of rotation of 60 degrees.
<!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 angle property</h2>
<p>You can see that the angle of rotation is 60 degrees</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,
angle: 60,
});
// Add it to the canvas
canvas.add(image);
</script>
</body>
</html>
Key Points
- The angle property accepts values in degrees (0-360).
- Positive values rotate clockwise, while negative values rotate counter-clockwise.
- The rotation occurs around the object's center point by default.
- You can combine the angle property with other properties like scaling and positioning.
Conclusion
The angle property in FabricJS provides an easy way to rotate Image objects. By setting a numeric value in degrees, you can achieve the desired rotation effect for your images on the canvas.
720 Views
