如何使用 FabricJS 創建帶有文字的畫布？-js教程-PHP中文網

如何使用 FabricJS 創建帶有文字的畫布？

王林

發布： 2023-08-24 16:49:05

轉載

1530 人瀏覽過

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

登入後複製

以上是如何使用 FabricJS 創建帶有文字的畫布？的詳細內容。更多資訊請關注PHP中文網其他相關文章！