如何在 FabricJS 中使用 IText 设置文本对齐方式？

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

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

语法

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

参数

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

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

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

选项键

  • textAlign − 此属性接受一个字符串作为值，允许我们控制文本对齐方式的可能值。其默认值为左对齐。其他可能的值为“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 对象是什么样的。在这种情况下，我们的文本将左对齐。

Open Compiler
<!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>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate an itext object
      var itext = new fabric.IText(
         "Add sample text here.Lorem ipsum dolor sit amet",{
            width: 300,
            left: 210,
            top: 70,
            fill: "#6b55da",
         }
      );

      // Add it to the canvas
      canvas.add(itext);
   </script>
</body>
</html>

示例 2

将 textAlign 属性作为键值对传递

在此示例中，我们将看到将值赋给 textAlign 属性如何改变画布中 IText 对象内文本的对齐方式。由于我们传递的值为“right”，因此文本现在将右对齐。

Open Compiler
<!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>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate an itext object
      var itext = new fabric.IText(
         "Add sample text here.Lorem ipsum dolor sit amet",{
            width: 300,
            left: 210,
            top: 70,
            fill: "#6b55da",
            textAlign: "right",
         }
      );
      
      // Add it to the canvas
      canvas.add(itext);
   </script>
</body>
</html>

更新于：2022年9月13日

644 次查看

启动您的职业生涯

完成课程获得认证

开始学习
广告