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 straighten a rotated Polygon object using FabricJS?
We can create a Polygon object by creating an instance of fabric.Polygon. A polygon object can be characterized by any closed shape consisting of a set of connected straight line segments. Since it is one of the basic elements of FabricJS, we can also easily customize it by applying properties like angle, opacity etc.
We can straighten a rotated Polygon object by using the straighten method. The straighten method straightens an object by rotating it from its current angle to the nearest cardinal angle (0°, 90°, 180°, or 270°), depending on which is closer.
Syntax
straighten(): fabric.Object
How the straighten Method Works
The straighten method analyzes the current rotation angle of an object and automatically rotates it to the nearest cardinal angle. For example:
- 45° becomes 0° (closer than 90°)
- 135° becomes 180° (closer than 90°)
- 315° becomes 0° (closer than 270°)
Example 1: Polygon without straighten Method
Let's see how a Polygon object looks when rotated by 45 degrees without using the straighten method:
<!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 the angle property a value without using the straighten method
</h2>
<p>You can see that the polygon has an angle of 45 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);
// Initiating a polygon object
var polygon = new fabric.Polygon(
[
{ x: -20, y: -35 },
{ x: 20, y: -35 },
{ x: 40, y: 0 },
{ x: 20, y: 35 },
{ x: -20, y: 35 },
{ x: -40, y: 0 },
],
{
stroke: "red",
left: 100,
top: 50,
fill: "black",
strokeWidth: 2,
strokeLineJoin: "bevil",
angle: 45,
}
);
// Adding it to the canvas
canvas.add(polygon);
</script>
</body>
</html>
Example 2: Using the straighten Method
Now let's see how the same Polygon object behaves when we apply the straighten method. Although we set the angle to 45 degrees, the polygon will be automatically straightened to 0 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 straighten method</h2>
<p>
You can see that the angle of rotation is 0 degree for the polygon 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);
// Initiating a polygon object
var polygon = new fabric.Polygon(
[
{ x: -20, y: -35 },
{ x: 20, y: -35 },
{ x: 40, y: 0 },
{ x: 20, y: 35 },
{ x: -20, y: 35 },
{ x: -40, y: 0 },
],
{
stroke: "red",
left: 100,
top: 50,
fill: "black",
strokeWidth: 2,
strokeLineJoin: "bevil",
angle: 45,
}
);
// Adding it to the canvas
canvas.add(polygon);
// Using the straighten method
polygon.straighten();
</script>
</body>
</html>
Key Points
- The
straightenmethod works with any fabric object, not just polygons - It automatically chooses the nearest cardinal angle (0°, 90°, 180°, 270°)
- This method is useful for aligning objects in UI applications
- The method returns the fabric object, allowing for method chaining
Conclusion
The straighten method in FabricJS provides an easy way to snap rotated objects to cardinal angles. This is particularly useful for creating aligned layouts and ensuring consistent object positioning in canvas applications.
260 Views
