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 an instance in Text using FabricJS?
In this tutorial, we are going to learn how to set the angle of rotation of an instance in Text using FabricJS. We can display text on canvas by adding an instance of fabric.Text. Not only does it allow us to move, scale and change the dimensions of the text but it also provides additional functionality like text alignment, text decoration, line height which can be obtained by the properties textAlign, underline and lineHeight respectively. Similarly, we can also set the angle of rotation of an instance by using the rotate method.
Syntax
rotate(angle: Number)
Parameters
angle ? This parameter accepts a Number which sets the angle of an instance with centered rotation
Example 1: Default Appearance of the Text Object
Let's see a code example to see how our text object looks when the rotate method is not used. In this case, our text object will not be rotated by any angle.
<!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 the Text object</h2>
<p>You can see that the angle of rotation of text object is zero</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 text object
var text = new fabric.Text("Add sample \ntext here.", {
width: 300,
left: 60,
top: 70,
fill: "green",
});
// Add it to the canvas
canvas.add(text);
</script>
</body>
</html>
Example 2: Using the rotate Method with Custom Value
In this example, we will see how assigning a value to the rotate method rotates our text object by a certain angle. Since we have passed the value as 45, the instance will be rotated by 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 rotate method with a custom value</h2>
<p>You can see that the angle of rotation of text object is 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 a text object
var text = new fabric.Text("Add sample \ntext here.", {
width: 300,
left: 110,
top: 70,
fill: "green",
});
// Using the rotate method
text.rotate(45);
// Add it to the canvas
canvas.add(text);
</script>
</body>
</html>
Key Points
- The
rotate()method accepts angle values in degrees - Rotation is centered around the object's center point
- Positive values rotate clockwise, negative values rotate counter-clockwise
- The rotation can be applied before or after adding the text to the canvas
Conclusion
The rotate() method in FabricJS provides an easy way to rotate text objects at any angle. This feature is particularly useful for creating dynamic layouts and visual effects in canvas applications.
302 Views
