How to straighten IText objects using FabricJS?-JS Tutorial-php.cn

How to straighten IText objects using FabricJS?

王林

Release： 2023-08-25 09:09:06

forward

1450 people have browsed it

如何使用 FabricJS 拉直 IText 对象？

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

Copy after login

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.

<!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 HereLorem 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>

Copy after login

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.

<!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 HereLorem 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>

Copy after login

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!