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 rotation of a Rectangle using FabricJS?
In this tutorial, we are going to set the angle of rotation of a Rectangle using FabricJS. Rectangle is one of the various shapes provided by FabricJS. In order to create a rectangle, we will have to create an instance of fabric.Rect class and add it to the canvas.
The angle property in FabricJS defines the angle of 2D rotation of an object. We also have the centeredRotation property that allows us to use the center point of a rectangle as the origin of transformation.
Syntax
new fabric.Rect({ angle: Number, centeredRotation: Boolean })
Parameters
Options (optional) ? This parameter is an Object which provides additional customizations to our rectangle. Using this parameter, properties such as colour, cursor, stroke width, and a lot of other properties can be changed related to the rectangle of which angle and centeredRotation are properties.
Options Keys
angle ? This property accepts a Number which specifies the angle of rotation of a rectangle in degrees.
centeredRotation ? This property accepts a Boolean value which determines whether the center of the rectangle is the origin of transformation or not.
Example 1: Disabling Centered Rotation
Let's see a code example to set the angle of rotation of a Rectangle in FabricJS. A negative angle specifies counter-clockwise direction whereas a positive angle specifies a clockwise direction. Since we have assigned centeredRotation a False value, the rectangle will rotate while using its corner point as the center of rotation.
<!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>Passing angle as key with a custom value and disabling the centered rotation for the rectangle</h2>
<p>Rotate the rectangle to see that its centered rotation has been disabled.</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 object
var rect = new fabric.Rect({
left: 125,
top: 90,
width: 170,
height: 70,
fill: "#cf1020",
centeredRotation: false,
angle: 15,
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>
Example 2: Enabling Centered Rotation
As we can see from this example, by setting the centeredRotation property as true, our rectangle now uses its center as the center of rotation. Prior to version 1.3.4, centeredScaling and centeredRotation were enclosed within one single property called centerTransform.
<!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>Enabling centered rotation for the rectangle</h2>
<p>Rotate the rectangle to see that centered rotation has been enabled.</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 object
var rect = new fabric.Rect({
left: 125,
top: 90,
width: 170,
height: 70,
fill: "#cf1020",
centeredRotation: true,
angle: 15,
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>
Key Points
Positive angles rotate clockwise, negative angles rotate counter-clockwise
The
centeredRotationproperty determines the rotation origin pointWhen
centeredRotationis false, the rectangle rotates around its cornerWhen
centeredRotationis true, the rectangle rotates around its center
Conclusion
The angle property in FabricJS allows you to rotate rectangles with precise control over rotation origin using centeredRotation. This provides flexibility for creating dynamic visual effects in canvas applications.
328 Views
