HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ

如何使用 FabricJS 设置 IText 中的文本对齐方式?

fabricjsjavascripthtml5 canvas

在本教程中，我们将学习如何使用 FabricJS 设置 IText 中的文本对齐方式。IText 类是在 FabricJS 版本 1.4 中引入的，扩展了 fabric.Text 并用于创建 IText 实例。IText 实例让我们可以自由地选择、剪切、粘贴或添加新文本，而无需进行其他配置。还有各种支持的按键组合和鼠标/触摸组合，这些组合使文本具有交互性，而 Text 中没有提供这些功能。

但是，基于 IText 的文本框允许我们调整文本矩形的大小并自动换行。但 IText 并非如此，因为高度不会根据换行进行调整。我们可以使用各种属性来操纵我们的 IText 对象。类似地，我们也可以使用 textAlign 属性设置其文本对齐方式。

语法

new fabric.IText(text: String , { textAlign : String }: Object)

参数

  • text − 此参数接受一个String，即我们想要显示的文本字符串。

  • options (可选) − 此参数是一个对象，它为我们的 IText 对象提供额外的自定义。使用此参数，可以更改与 textAlign 属性相关的对象的颜色、光标、边框宽度和许多其他属性。

选项键

  • textAlign − 此属性接受 String 作为值，允许我们控制文本对齐的可能值。其默认值为 left。其他可能的值是"center"、"right"、"justify"、"justify-left"、"justify-center"和"justify-right"，解释如下:

    • center − 将文本对齐到中心。

    • right − 将文本右对齐。

    • justify − 拉伸线条，使每条线与 IText 对象的左右边缘距离相同。

    • justify-left − 拉伸线条，使每条线与 IText 对象的左边缘距离相同。

    • justify-center − 将每条线居中，与左右边缘的距离不同。

    • justify-right −拉伸线条，使每条线条与 IText 对象右边缘的距离相同。

示例 1

IText 对象的默认外观

让我们看一个代码示例，看看当未使用 textAlign 属性时我们的 IText 对象是什么样子。在这种情况下，我们的文本将向左对齐。

<!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>Default appearance of the IText object</h2>
   <p>You can see that the text alignment is towards left</p>
   <canvas id="canvas"></canvas>

   <script>
      // 启动一个canvas实例
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // 启动一个 itext 对象
      var itext = new fabric.IText(
         "Add sample text here.
Lorem ipsum dolor sit amet",{
            width: 300,
            left: 210,
            top: 70,
            fill: "#6b55da",
         }
      );

      // 将其添加到画布
      canvas.add(itext);
   </script>
</body>
</html>

示例 2

将 textAlign 属性作为键和值传递

在此示例中，我们将看到如何为 textAlign 属性分配值来更改画布中 IText 对象内文本的对齐方式。由于我们已将值传递为"right"，因此文本现在将向右对齐。

<!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 textAlign property as key with a value</h2>
   <p>You can see that the text alignment is towards right</p>
   <canvas id="canvas"></canvas>
   
   <script>
      // 启动一个canvas实例
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // 启动一个 itext 对象
      var itext = new fabric.IText(
         "Add sample text here.
Lorem ipsum dolor sit amet",{
            width: 300,
            left: 210,
            top: 70,
            fill: "#6b55da",
            textAlign: "right",
         }
      );
      
      // 将其添加到画布
      canvas.add(itext);
   </script>
</body>
</html>

相关文章

打印 下一节 ❯❮ 上一节