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 an IText object using FabricJS?
In this tutorial, we are going to learn about how to straighten an IText object using FabricJS. The IText class was introduced in FabricJS version 1.4, extends fabric.Text and is used to create IText instances. An IText instance gives us the freedom to select, cut, paste or add new text without additional configurations. There are also various supported key combinations and mouse/touch combinations which make text interactive which are not provided in Text.
Textbox, however, which is based on IText allows us to resize the text rectangle and wraps lines automatically. This is not true for IText as height is not adjusted based on the wrapping of lines. We can manipulate our IText object by using various properties. Likewise, we can straighten an IText object by using the straighten method.
Syntax
straighten(): fabric.Object
How It Works
The straighten() method rotates an object to the nearest angle that is a multiple of 90 degrees (0°, 90°, 180°, 270°). This is useful for aligning objects that have been rotated to arbitrary angles back to standard orientations.
Example 1: Without Using straighten Method
Passing the angle property a value without using the straighten method
Let's see a code example to see how our IText object looks when the straighten method is not used. Here, we have specified the angle as 45 degrees, and since we have not applied the straighten method, the angle of rotation will remain as 45 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>Passing the angle property a value without using the straighten method</h2>
<p>You can see that the itext object 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);
// Initiate an itext object
var itext = new fabric.IText("Add Sample Text Here\nLorem ipsum ", {
width: 300,
left: 210,
top: 70,
fontSize: 30,
fill: "#b666d2",
backgroundColor: "#f8f4ff",
angle: 45,
});
// Add it to the canvas
canvas.add(itext);
</script>
</body>
</html>
Example 2: Using the straighten Method
Using the straighten method
Let's see a code example to see how the IText object looks like when the straighten method is used in conjunction with the angle property. Although we have set the angle of rotation as 45 degrees, our itext object will be straightened by rotating it back to 0 degrees as we have used 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>Using the straighten method</h2>
<p>You can see that the angle of rotation is 0 degree for the itext 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 an itext object
var itext = new fabric.IText("Add Sample Text Here\nLorem ipsum ", {
width: 300,
left: 210,
top: 70,
fontSize: 30,
fill: "#b666d2",
backgroundColor: "#f8f4ff",
angle: 45,
});
// Add it to the canvas
canvas.add(itext);
// Using the straighten method
itext.straighten();
</script>
</body>
</html>
Key Points
- The
straighten()method snaps objects to the nearest 90-degree angle - It's particularly useful for correcting slightly rotated objects
- The method works on any fabric object, not just IText
- Call
straighten()after adding the object to the canvas for immediate effect
Conclusion
The straighten() method in FabricJS provides an easy way to align rotated IText objects to standard orientations. This is especially useful in applications where precise alignment is important for design consistency.
235 Views
