如何使用 Fabric.js 更改文字畫布的字元間距？

Fabric.JS 的 fabric.Text 物件用於更改畫布型別文字的角樣式。Fabric.js 的 Text 類透過使用 fabric.Text 物件提供了文字抽象，這使我們能夠以面向物件的方式處理文字。與 Canvas 類相比，Text 類提供了豐富的功能。

文字物件包含不同的屬性，但更改文字畫布的字元間距可以使用其中一個屬性，即 charSpacing。此屬性以畫素為單位設定字元之間的間距。您還可以使用 setCharSpacing 方法更改畫布上現有文字物件的字元間距。

在建立新的 fabric.Text 物件時可以設定 charSpacing 屬性，或者使用 setCharSpacing 方法更改現有文字物件的屬性。charSpacing 屬性以畫素為單位測量，並指定要在文字物件中每個字元之間新增的空間量。

預設情況下，charSpacing 屬性設定為 0（無字元間距）。

更改文字物件的 charSpacing 屬性將導致文字在畫布上重新渲染。charSpacing 屬性獨立於 fontSize 屬性，因此增加文字物件的 charSpacing 不會導致字型大小發生變化。

語法

以下是文字的語法：

fabric.Text(text, charSpacing: number);

引數

  • text - 必須指定的要寫入的文字

  • charSpacing - 指定字元之間的空格

步驟

按照以下步驟使用 Fabric.js 更改畫布型別文字的字型粗細：

  • 步驟 1 - 在您的 HTML 檔案中包含 Fabric.js 庫

  • 步驟 2 - 在您的 HTML 檔案中建立一個新的畫布元素

  • 步驟 3 - 在您的 JavaScript 程式碼中初始化畫布元素

  • 步驟 4 - 建立一個新的 Fabric.js Text 物件並將 charSpacing 屬性設定為所需的 charSpacing 值

  • 步驟 5 - 將 Text 物件新增到畫布

示例

在本例中，我們使用 Fabric.js 更改文字畫布的字元間距：

<html> 
   <head>
      <script src= "https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"> </script>
   </head>
   <body>
      <h2>Changing the Character Spacing of a text canvas using Fabric.js</h2>
      <p>Character spacing of the below text is changed to 500.</p>
      <canvas id="idcanvas" width="700" height="400"> </canvas>
      <script>  
         // Creating instances of new for the Canvas	 
         var canvas = new fabric.Canvas("idcanvas"); 

         // Creating the instance for the new Textbox
         var text1 = new fabric.Text('Hello World!', {
            top: 50,
            fontSize: 40,
            charSpacing: 500 
         }); 

         // Rendering the Textbox on an Canvas
         canvas.add(text1); 
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script> 
   </body> 
</html>

這將建立一個包含字元間距為 500 畫素的文字物件的畫布元素。您可以調整 charSpacing 值以更改文字的字元間距。

結論

在本文中，我們討論瞭如何更改文字畫布的字元間距以及示例。在示例中，我們透過使用 charSpacing 屬性更改了畫布文字的字元間距。在這裡，我們將字元之間的字元間距更改為 500 畫素。

更新於：2023年2月21日

628 次瀏覽

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告