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 Line using FabricJS?
In this tutorial, we are going to learn about how to set the angle of rotation of a Line using FabricJS. A Line element is one of the basic elements provided in FabricJS. It is used for creating straight lines. Because line elements are geometrically one-dimensional and do not contain an interior, they are never filled.
We can create a line object by creating an instance of fabric.Line, specifying the x and y coordinates of the line and adding it to the canvas. The centeredRotation property allows us to use the center point of a line object as the origin of transformation.
Syntax
new fabric.Line(points: Array, { angle: Number, centeredRotation: Boolean }: Object)
Parameters
points ? This parameter accepts an Array of points which determines the (x1, y1) and (x2, y2) values, those being the x- and y-axis coordinates of the start and end of the line respectively.
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 line object of which
angleandcenteredRotationare the properties.
Options Keys
angle ? This property accepts a Number which specifies the angle of rotation of a line object in degrees.
centeredRotation ? The property accepts a Boolean value which determines whether the center of the line object is the origin of transformation or not.
Using angle with centeredRotation set to false
Let's see a code example to set the angle of rotation of a Line 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 line object 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 Line</h2>
<p>
You can select and rotate the line object to verify that it uses its corner point as the center of rotation
</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 Line object
var line = new fabric.Line([200, 100, 100, 40], {
stroke: "blue",
strokeWidth: 20,
centeredRotation: false,
angle: 15,
});
// Add it to the canvas
canvas.add(line);
</script>
</body>
</html>
Using angle with centeredRotation set to true
As we can see from this example, by setting the centeredRotation property as true, our line object 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 line object</h2>
<p>
You can select and rotate the line object to verify that it now uses its center as center of rotation
</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 Line object
var line = new fabric.Line([200, 100, 100, 40], {
stroke: "blue",
strokeWidth: 20,
centeredRotation: true,
angle: 15,
});
// Add it to the canvas
canvas.add(line);
</script>
</body>
</html>
Key Points
- The
angleproperty accepts values in degrees, with positive values for clockwise rotation - Setting
centeredRotation: falsemakes the line rotate around its corner point - Setting
centeredRotation: truemakes the line rotate around its center point - The rotation behavior affects how users can interactively rotate the line object on the canvas
Conclusion
The angle and centeredRotation properties in FabricJS provide precise control over line rotation. Use centeredRotation: true for natural center-based rotation, or false for corner-based rotation depending on your design needs.
602 Views
