如何使用FabricJS获取文本的缩放高度？-js教程-PHP中文网

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

WBOY

发布： 2023-08-23 21:37:08

转载

1289 人浏览过

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

在本教程中，我们将学习如何使用FabricJS获取文本的缩放高度。我们可以通过添加fabric.Text的实例来在画布上显示文本。它不仅允许我们移动、缩放和改变文本的尺寸，还提供了其他功能，如文本对齐、文本装饰、行高，可以通过属性textAlign、underline和lineHeight分别获得。我们还可以使用getScaledHeight方法来找到对象的缩放高度。

语法

getScaledHeight()

登录后复制

Example 1

的中文翻译为：

示例1

使用getScaledHeight方法

让我们看一个代码示例，以查看在使用getScaledHeight方法时记录的输出。在这种情况下，将返回对象的高度。

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

的翻译为：

示例2

使用getScaledHeight方法并传递scaleY属性

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>

登录后复制

以上是如何使用FabricJS获取文本的缩放高度？的详细内容。更多信息请关注PHP中文网其他相关文章！