如何使用 FabricJS 创建带有文本的画布？-码农资源网

如何使用 fabricjs 创建带有文本的画布？

在本教程中，我们将学习如何使用 FabricJS 创建带有 Text 对象的画布。我们可以通过添加 Fabric.Text 的实例在画布上显示文本。它不仅允许我们移动、缩放和更改文本的尺寸，而且还提供了附加功能，例如文本对齐、文本装饰、行高，这些功能可以分别通过属性 textAlign、underline 和 lineHeight 获得。 Text 和 Textbox 之间的一个区别是，Textbox 可以交互编辑，而 Text 则不能。

语法

new fabric.Text( text: String , options: Object)

参数

text – 此参数接受 String，它是我们要显示为文本的文本字符串。
选项（可选） – 此参数是一个对象，它为我们的文本对象提供额外的自定义。使用此参数可以更改与文本对象相关的颜色、光标、描边宽度和许多其他属性。

示例 1

创建 Fabric.Text() 的实例并将其添加到画布中

让我们看一个代码示例，了解如何将文本对象添加到画布中。唯一必需的参数是实际的文本字符串，而第二个参数是可选的选项对象，它允许我们为文本对象分配不同的属性。

<!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>Creating an instance of fabric.Text() and adding it to our canvas</h2>
   <p>You can see the text in the canvas now</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", {
         left: 50,
         top: 70,
      });

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

示例 2

使用set方法操作Text对象

在此示例中，我们使用 set 方法将属性分配给文本对象，该方法是值的设置器。任何与描边、描边宽度、角度、缩放、旋转等相关的属性都可以使用此方法进行改变。

<!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>Manipulating the Text object by using the set method</h2>
   <p>You can see the text in the canvas now with set values</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");

      // Set the properties
      text.set("top", 70);
      text.set("left", 65);
      text.set("fill", "white");
      text.set("fontWeight", "bold");
      text.set("backgroundColor", "#bf94e4");

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

想要了解更多内容，请持续关注码农资源网，一起探索发现编程世界的无限可能!
本站部分资源来源于网络，仅限用于学习和研究目的，请勿用于其他用途。
如有侵权请发送邮件至1943759704@qq.com删除

码农资源网 » 如何使用 FabricJS 创建带有文本的画布？