How to get the scaled width of text using FabricJS-JS Tutorial-php.cn

How to get the scaled width of text using FabricJS

PHPz

Release： 2023-08-25 09:13:02

forward

798 people have browsed it

如何使用 FabricJS 获取文本的缩放宽度

In this tutorial, we will learn how to get the scaled width of text using FabricJS. We can display text on the canvas by adding an instance of Fabric.Text. Not only does it allow us to move, scale and change the dimensions of text, but it also provides additional features such as text alignment, text decoration, line height, which are available through the properties textAlign, underline and lineHeight respectively. We can also find the scaled width of an object using the getScaledWidth method.

grammar

getScaledWidth()

Copy after login

Example 1

Use getScaledWidth method

Let's look at a code example to see the output logged when using the getScaledWidth method. In this case, the width of the object is returned.

<!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 getScaledWidth method</h2>
   <p>You can open console from dev tools and see that the width value is being displayed in the console</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 sampletext here", {
         width: 300,
         fill: "green",
         fontWeight: "bold",
      });

      // Add it to the canvas
      canvas.add(text);

      // Using getScaledWidth method
      console.log("The scaled width is", text.getScaledWidth());
   </script>
</body>
</html>

Copy after login

Example 2

Use getScaledWidth method and pass scaleX property

Let's look at a code example to see the output logged when the getScaledWidth method is used in conjunction with the scaleY property. In this case, the final scaled width will be displayed in the console.

<!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 getScaledWidth method and passing the scaleX property</h2>
   <p>You can open console from dev tools and see that the width value is being displayed in the console has increased </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 sampletext here", {
         width: 300,
         fill: "green",
         fontWeight: "bold",
         scaleX: 2,
      });
      
      // Add it to the canvas
      canvas.add(text);

      // Using getScaledWidth method
      console.log("The scaled width is", text.getScaledWidth());
   </script>
</body>
</html>

Copy after login

The above is the detailed content of How to get the scaled width of text using FabricJS. For more information, please follow other related articles on the PHP Chinese website!