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 a Line in FabricJS?
In this tutorial, we are going to learn about how to set the angle of a Line object 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. In order to set the angle of a line object we use the angle property.
Syntax
new fabric.Line( points: Array , { angle: Number }: 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 Line object. Using this parameter stroke, corner colour, origin and a lot of other properties can be changed related to the Line object of which angle is a property.
Options Keys
angle ? This property accepts a Number that determines the angle of rotation of an object in degrees.
Default appearance of Line object
Let's see a code example of how the Line 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 Line object</h2>
<p>
You can see the default appearance of line object
</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,
});
// Add it to the canvas
canvas.add(line);
</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 Line 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 the angle of rotation is 60 degrees
</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,
angle: 60
});
// Add it to the canvas
canvas.add(line);
</script>
</body>
</html>
Key Points
- The angle property rotates the line around its center point
- Angle values are specified in degrees (not radians)
- Positive values rotate clockwise, negative values rotate counterclockwise
- The rotation maintains the line's original length and stroke properties
Conclusion
The angle property in FabricJS provides an easy way to rotate Line objects. Simply specify the rotation angle in degrees when creating the line or modify it later to achieve the desired orientation.
365 Views
