Fabric.js 如何改变canvas文本的字体权重

Fabric.js 如何改变canvas文本的字体权重

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

文本对象包含不同的属性,但要改变一个文本画布的字体重量,可以使用其中的一个字体属性,即fontWeight。Fabric.js文本对象的fontWeight属性规定了文本字符的重量或厚度。它可以用来使文本看起来更厚或更薄。

语法

以下是文本对象的语法-

fabric.Text(text, fontWeight: number | string);

参数

  • text – 用于指定必须写入的文本

  • fontWeight – 指定字体的重量为粗体、正常、斜体等。

操作步骤

按照下面给出的步骤,使用Fabric.js改变画布型文本的字体重量。

  • 第1步 – 在你的HTML文件中包含Fabric.js库。

  • 第2步 – 在你的HTML文件中创建一个新的canvas元素。

  • 第3步 – 在你的JavaScript代码中初始化画布元素。

  • 第4步 – 创建一个新的Fabric.js文本对象,并将fontWeight属性设置为所需的fontweight值。

  • 第5步 – 将文本对象添加到画布上。

例子

让我们看看如何使用fabric.js来改变画布型文本的字体重量。

<html>
   <head>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
   </head>
   <body>
      <h2>Changing font-weight of a canvas type text using Fabric.js</h2>
      <p>Select the textbox to see that the controlling corners.</p>
      <p>Font Weight is schnged to "bold".</p>
      <canvas id="mycanvas"></canvas>
      <script>
         var canvas = new fabric.Canvas('mycanvas'); 
         var textcontent = new fabric.Text('Welcome to Tutorials Point!', {
            left: 50,
            top: 50,
            fontSize: 30, 
            fontWeight: 'bold'  
         }); 
         canvas.add(textcontent);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script> 
   </body>
</html> 

这段代码将用指定的ID创建一个新的画布元素,用文本 “Hello World!”创建一个新的Fabric.js文本对象,将文本的字体重量设置为 “黑体”,并将文本对象添加到画布上。该文本将以粗体字的重量出现在画布上。

例子

让我们看看另一个例子,我们可以用fabric.js将canvas类型的文本的字体重量改为斜体。

<html>
   <head>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
   </head>
   <body>
      <h2>Changing the font-weight of a canvas type text using Fabric.js</h2>
      <p>Select the textbox to see that the controlling corners.</p>
      <p>Font Weight is schnged to "italic".</p>
      <canvas id="thiscanvas" width="600" height="500"></canvas>
      <script>
         var canvas = new fabric.Canvas('thiscanvas'); 
         var textcontent1 = new fabric.Text('Welcome to Tutorials Point!', {
            left: 50,
            top: 50,
            fontSize: 30, 
            fontWeight: 'italic'  
         }); 
         canvas.add(textcontent1);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250); 
      </script> 
   </body>
</html>

这段代码将用指定的ID和尺寸创建一个新的画布元素,用文本 “Hello World!”创建一个新的Fabric.js文本对象,将文本的字体重量设为 “斜体”,并将文本对象添加到画布上。该文本将以斜体字的重量出现在画布上。

总结

在这篇文章中,我们通过实例演示了如何改变画布类型文本的字体重量。我们在这里看到了两个不同的例子,我们使用了fontWeight属性来改变画布文本的字体重量。在第一个例子中,我们使用 “粗体 “作为改变文本为粗体的值。在第二个例子中,我们用’斜体’作为改变文本为斜体的值。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

FabricJS 教程