Fabric.js 如何改变画布文本的字符间距

Fabric.JS的fabric.Text对象是用来改变画布型文本的角样式的。Fabric.js的Text类通过使用fabric.Text对象提供了文本抽象，这使得我们能够以面向对象的方式处理文本。与canvas类相比，Text类提供了丰富的功能。

文本对象包含不同的属性，但要改变文本画布的字符间距，可以使用其中的一个属性，即charSpacing。这个属性以像素为单位设置字符之间的间距。你也可以使用setCharSpacing方法来改变画布上现有文本对象的字符间距。

charSpacing属性可以在创建一个新的fabric.Text对象时设置，或者使用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文本对象，并将charSpacing属性设置为所需的charSpacing值
第5步 – 将文本对象添加到画布上

例子

在这个例子中，我们使用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值来改变文本的字符间距。