Teach with us

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

Example 1

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. The straighten method straightens an object by rotating it from its current angle to 0,90,180 or 270 etc., depending on the angle that is closer. The angle property sets the angle of rotation of an object in degrees. Here, we have specified the angle as 45. But since we have not applied the straighten property, 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
Lorem 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

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 degree 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
Lorem 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>
Updated on 13-Sep-2022 10:02:14

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements