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

javascriptjavascript 2023-08-28 08:56:30 1101
摘要： 在本教程中，我们将学习如何使用FabricJS创建带有Text对象的画布。我们可以通过添加Fabric.Text的实例在画布上显示文本。它不仅允许我们移动、缩放和更改文本的尺寸，而且还提供了附加功能，例如文本对齐、文本装饰...

如何使用 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>

标签：