如何使用Fabric.js更改画布型文本的角落样式

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

文本对象包含不同的属性，但要更改角落的样式并渲染画布上的文本可以使用其中一个样式属性，即cornerStyle。如果cornerStyle是默认值，则返回rect，否则该属性的值定义为circle。

Fabric.js是最强大和简单的HTML 5画布库之一，它快速且功能丰富。圆圈、矩形、椭圆和多边形包含数百个或更多的简单路径。因此，我们可以通过鼠标来移动、缩放这些对象，并且我们可以修改透明度、颜色和z-index等属性。

语法

以下是文本的语法示例：

fabric.Text(text, cornerStyle: string);

参数

text − 用于指定要写入的文本
cornerStyle − 用于指定角落样式，可以是矩形（rect）或圆形（circle）。默认为矩形样式。

示例1

在这个示例中，我们需要使用CDN导入Fabric.js库，该库用于在HTML文档的body标签中创建画布块，并且包含文本。现在，我们将初始化Canvas和Text的实例，这些实例由Fabric.js库提供，并且可以使用cornerStyle属性来改变文本的角落样式，并在Canvas上渲染文本。在这里，我们将属性的值定义为圆形。

<html>
   <head>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>
   </head>
   <body>
      <h2>Changing the corner style of a canvas-type text</h2>
      <p>Select the textbox to see that the controlling corners.</p>
      <p>Corner style is changed to "circle".</p>
      <canvas id="canvas" width="300" height="200"></canvas>
      <script>
         var canvas = new fabric.Canvas("canvas");
         var mytext = new fabric.Text('Welcome to Tutorials Point', {
            cornerStyle: 'circle',
            top: 50,
            left: 50,
         });
         canvas.add(mytext);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(350);
      </script>
   </body>
</html>

让我们举另一个示例，使用Fabric.js将角样式定义为画布类型文本的默认样式。

示例2

在下面的示例中，我们将初始化Canvas和Text的实例，这些实例是由Fabric.js库提供的，并且可以使用cornerStyle属性来更改文本的角样式，然后将Text呈现在Canvas上。在这里，我们将属性定义为rect，表示矩形。

<html>
   <head>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>
   </head>
   <body>
      <h2>Changing the corner style of a canvas-type text</h2>
      <p>Select the textbox to see that the controlling corners.</p>
      <p>Corner style is changed to "rect".</p>
      <canvas id="canvas" width="250" height="350"></canvas>
      <script>
         var canvas = new fabric.Canvas("canvas");
         var content = new fabric.Text('Welcome to Tutorials Point', {
            cornerStyle: 'rect',
            top: 50,
            left: 50,
         });
         canvas.add(content);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

结论

在本文中，我们演示了如何改变画布类型文本的角落样式，并提供了示例。我们在这里看到了两个不同的示例，第一个示例中，我们使用了文本类和角落样式属性事件，通过将角落样式定义为圆形来改变画布类型文本的角落样式。在第二个示例中，我们使用了文本类和角落样式属性事件，通过将角落样式定义为矩形（角落样式的默认值）来改变画布类型文本的角落样式。