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 Triangle using FabricJS?
In this tutorial, we are going to set the angle of rotation of a Triangle using FabricJS. Triangle is one of the various shapes provided by FabricJS. In order to create a triangle, we will have to create an instance of fabric.Triangle 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 triangle as the origin of transformation.
Syntax
new fabric.Triangle({
angle: Number,
centeredRotation: Boolean
}: Object)
Parameters
-
Options (optional) ? This parameter is an Object which provides additional customizations to our triangle. Using this parameter, properties such as colour, cursor, stroke width, and a lot of other properties can be changed related to the triangle of which angle and centeredRotation are properties.
Options Keys
-
angle ? This property accepts a Number which specifies the angle of rotation of a triangle in degrees. Positive values rotate clockwise, negative values rotate counter-clockwise.
-
centeredRotation ? This property accepts a Boolean value which determines whether the center of the triangle is the origin of transformation or not. When
true, the triangle rotates around its center; whenfalse, it rotates around its corner point.
Example 1: Disabling Centered Rotation
Let's see a code example to set the angle of rotation of a Triangle in FabricJS. Since we have assigned centeredRotation a false value, the triangle will rotate 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>Triangle with Corner Point Rotation</h2>
<p>The triangle rotates around its corner point.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(400);
canvas.setHeight(250);
// Initiate a triangle object
var triangle = new fabric.Triangle({
left: 105,
top: 60,
width: 100,
height: 70,
fill: "#deb887",
centeredRotation: false,
angle: 15,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
Example 2: Enabling Centered Rotation
In this example, by setting the centeredRotation property as true, our triangle now uses its center as the center of rotation. This provides more intuitive rotation behavior for most use cases.
<!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>Triangle with Centered Rotation</h2>
<p>The triangle rotates around its center point.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(400);
canvas.setHeight(250);
// Initiate a triangle object
var triangle = new fabric.Triangle({
left: 105,
top: 60,
width: 100,
height: 70,
fill: "#deb887",
centeredRotation: true,
angle: 15,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
Comparison
| Property | Value | Rotation Behavior |
|---|---|---|
centeredRotation |
false |
Rotates around corner point |
centeredRotation |
true |
Rotates around center point |
Key Points
- The
angleproperty accepts values in degrees - Positive angles rotate clockwise, negative angles rotate counter-clockwise
- Use
centeredRotation: truefor more intuitive rotation behavior - Prior to version 1.3.4, centeredScaling and centeredRotation were part of a single property called centerTransform
Conclusion
The angle and centeredRotation properties in FabricJS provide flexible control over triangle rotation. Use centeredRotation: true for most applications to achieve natural rotation behavior around the triangle's center.
293 Views
