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 Textbox using FabricJS?
In this tutorial, we are going to set the angle of rotation of a Textbox using FabricJS. We can customize, stretch or move around the text written in a textbox. In order to create a textbox, we will have to create an instance of fabric.Textbox 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 textbox as the origin of transformation.
Syntax
new fabric.Textbox(text: String, { angle: Number, centeredRotation: Boolean }: Object)
Parameters
text ? This parameter accepts a String which is the text string that we want to display inside our textbox.
options (optional) ? This parameter is an Object which provides additional customizations to our textbox. Using this parameter, properties such as colour, cursor, stroke width and a lot of other properties can be changed related to the textbox of which angle is a property.
Options Keys
angle ? This property accepts a Number which specifies the angle of rotation of a textbox in degrees.
centeredRotation ? The property accepts a Boolean value which determines whether the center of the textbox is the origin of transformation or not.
Example 1: Disabling Centered Rotation
Passing angle as key with a custom value and disabling the centered rotation for the Textbox
Let's see a code example to set the angle of rotation of a Textbox in FabricJS. A negative angle specifies counter-clockwise direction, whereas a positive angle specifies a clockwise direction. Since we have assigned centeredRotation a False value, the textbox will rotate while 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>Passing angle as key with a custom value and disabling the centered rotation for the Textbox</h2>
<p>You can select and rotate the textbox to verify that it uses its corner point as the center of rotation</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 textbox object
var textbox = new fabric.Textbox("Peace begins with a smile.", {
backgroundColor: "#b0e0e6",
width: 400,
top: 70,
left: 110,
centeredRotation: false,
angle: 15,
});
// Add it to the canvas
canvas.add(textbox);
</script>
</body>
</html>
Example 2: Enabling Centered Rotation
Enabling centered rotation for the textbox
As we can see from this example, by setting the centeredRotation property as true, our textbox now uses its center as the center of rotation. Prior to version 1.3.4, centeredScaling and centeredRotation were enclosed within one single property called centerTransform.
<!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>Enabling centered rotation for the textbox</h2>
<p>You can select and rotate the textbox to verify that it now uses its center as center of rotation</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 textbox object
var textbox = new fabric.Textbox("Peace begins with a smile.", {
backgroundColor: "#b0e0e6",
width: 400,
top: 70,
left: 110,
centeredRotation: true,
angle: 15,
});
// Add it to the canvas
canvas.add(textbox);
</script>
</body>
</html>
Key Points
The
angleproperty accepts values in degrees (positive for clockwise, negative for counter-clockwise)centeredRotation: falseuses the corner point as rotation centercenteredRotation: trueuses the textbox center as rotation centerPrior to FabricJS v1.3.4, rotation behavior was controlled by the
centerTransformproperty
Conclusion
The angle property controls textbox rotation in FabricJS, while centeredRotation determines the rotation origin. Use centeredRotation: true for more predictable rotation behavior around the textbox center.
401 Views
