如何使用 FabricJS 设置文本变换的水平原点？

在本教程中，我们将学习如何使用 FabricJS 设置文本变换的水平原点。我们可以通过添加 fabric.Text 实例来在画布上显示文本。它不仅允许我们移动、缩放和更改文本的尺寸，还提供其他功能，例如文本对齐、文本修饰、行高，这些可以通过 textAlign、underline 和 lineHeight 属性分别获得。类似地，我们也可以使用 originX 属性设置变换的水平原点。

语法

new fabric.Text(text: String , { originX : String }: Object)

参数

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

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

选项键

  • originX − 此属性接受一个字符串值，允许我们设置变换的水平原点。“left”（左），“right”（右）和“center”（居中）是可能的值。其默认值为“left”（左）。

示例 1

文本对象的默认外观

让我们看一个代码示例，看看当不使用 originX 属性时我们的文本对象是什么样子。在这种情况下，变换的水平原点将为左，这也是默认值。

<!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 Text object</h2>
   <p>You can see that the horizontal origin of transformation 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 a text object
      var text = new fabric.Text("Add sample 
text here.", {
         width: 300,
         left: 60,
         top: 70,
         fill: "green",
      });

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

示例 2

将 originX 属性作为键传递值

在这个例子中，我们将看到为 originX 属性赋值如何改变变换的水平原点。我们在本例中使用了两个文本对象来显示差异。在我们的第一个文本对象中，由于我们传递的值为“right”（右），因此变换的水平原点现在位于右侧。相同的左属性 200 应用于两个文本，但由于变换的水平原点发生变化，它们仍然处于不同的水平位置。

<!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 originX property as key with a value</h2>
   <p>You can see that the first text object(text1) has drifted further away while text2 maintains the default horizontal origin of transformation</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 text1 = new fabric.Text("Text 1", {
         width: 300,
         left: 200,
         top: 70,
         fill: "green",
         originX: "right",
      });

      // Initiate another text object
      var text2 = new fabric.Text("Text 2", {
         width: 300,
         left: 60,
         top: 70,
         fill: "red",
      });

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

更新于：2022年9月14日

257 次浏览

启动您的职业生涯

完成课程获得认证

开始学习
广告
© . All rights reserved.