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

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

WBOY

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

转载

1450人浏览过

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

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

语法

getScaledHeight()

登录后复制

Example 1

的中文翻译为：

示例1

使用getScaledHeight方法

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

微信公众平台开发入门教程中文WORD版

由于微信的大热，为了更好的方便使用微信的用户查询一些信息，这篇文章是入门级的微信公众平台开发教程，需要的朋友可以参考下这篇入门教程将引导你完成如下任务：创建百度云平台应用启用微信公众平台开发模式获取订阅、文字、图片、语音、视频消息回复文本、图文及音乐消息程序开发

查看详情

<!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中文网其它相关文章！