How to straighten IText objects using FabricJS?

In this tutorial, we will learn how to straighten IText objects using FabricJS. The IText class was introduced in FabricJS version 1.4, which extends Fabric.Text and is used to create IText instances. IText instances give us the freedom to select, cut, paste or add new text without additional configuration. There are also various supported key combinations and mouse/touch combinations to make text interactive that are not available in Text.

However, IText-based Textbox allows us to resize the text rectangle and wrap it automatically. This is not the case for IText, as the height does not adjust based on line breaks. We can manipulate IText objects by using various properties. Likewise, we can straighten IText objects using the Straighten method.

grammar

straighten(): fabric.Object

Example 1

Passing a value to an angle property without using the Straighten method

Let's look at a code example to see what an IText object looks like without using the Straighten method. The Straighten method straightens an object by rotating it from its current angle to an angle of 0, 90, 180, or 270, depending on which angle is closer. The angle property sets the object's rotation angle in degrees. Here, we specify the angle as 45 degrees. But since we didn't apply the Straighten property, the rotation angle will remain at 45 degrees.

     
  
Passing the angle property a value without using the straighten method
 
You can see that the itext object has an angle of 45 degrees
    

Example 2

Use straightening method

Let's look at a code example to see what an IText object looks like when the Straighten method is used in conjunction with the angle property. Although we set the rotation angle to 45 degrees, our itext object will be straightened by rotating it back to 0 degrees because we used the Straighten method.

     
  
Using the straighten method
 
You can see that the angle of rotation is 0 degree for the itext object
    

The above is the detailed content of How to straighten IText objects using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!