简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  How to get the scaled height of text using FabricJS?

How to get the scaled height of text using FabricJS?

WBOY
WBOYforward
2023-08-23 21:37:081286browse

How to get the scaled height of text using FabricJS?

In this tutorial, we will learn how to get the zoom height of text using FabricJS. We can display text on the canvas by adding an instance of fabric.Text. It not only allows us to move, scale and change the size of text, but also provides other functions such as text alignment, text decoration, and line height, which can be obtained through the properties textAlign, underline, and lineHeight respectively. We can also use the getScaledHeight method to find the scaled height of an object.

grammar

getScaledHeight()
The Chinese translation of

Example 1

is:

Example 1

Use getScaledHeight method

Let's look at a code example to see the output logged when using the getScaledHeight method. In this case, the height of the object will be 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 getScaledHeight method</h2>
   <p>You can open console from dev tools and see that the height 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 getScaledHeight method
      console.log("The scaled height is", text.getScaledHeight());
   </script>
</body>
</html>

Example 2

is translated as:

Example 2

Use getScaledHeight method and pass scaleY attribute

Let’s see a code example to see the logged output when the getScaledHeight method is used in conjunction with the scaleY property. In this case, final scaled height 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 getScaledHeight method and passing the scaleY property</h2>
   <p>You can open console from dev tools and see that the height 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",
         scaleY: 2,
      });
      
      // Add it to the canvas
      canvas.add(text);
      
      // Using getScaledHeight method
      console.log("The scaled height is", text.getScaledHeight());
   </script>
</body>
</html>

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

Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to create private variables in JavaScript?Next article：How to create private variables in JavaScript?

Related articles

See more