Fabric.js 如何改变canvas文本的角样式

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

文本对象包含不同的属性，但要改变画布上的文字的角和渲染的风格，可以使用其中的一个风格属性，即cornerStyle来完成。如果cornerStyle是默认的，那么它将返回矩形，否则该属性的值将被定义为一个圆形。

Fabric.js是最强大、最简单的HTML 5画布库之一，它速度快，功能丰富。圆、矩形、椭圆和多边形包含了数百条甚至更多的简单路径。为此，我们可以进行移动、缩放，这些对象可以在鼠标的帮助下进行旋转，透明度、颜色和z-index等属性也可以被我们修改。

语法

以下是文本的语法-

fabric.Text(text, cornerStyle: string);

参数

text – 用来指定要写的文字。
cornerStyle – 它用于指定角的样式，即矩形和圆形。默认情况下，角的样式是矩形。

例子1

在这个例子中，我们需要使用CDN导入Fabric.js库，用于在HTML文档的body标签中创建画布块，其中包含文本。现在我们将初始化由Fabric.js库提供的Canvas和Text的实例，它有助于使用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属性改变文本的角落样式，并在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 "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>

结论

在这篇文章中，我们已经演示了如何改变画布型文本的角的样式，并举出了一些例子。我们在这里看到了两个不同的例子，在第一个例子中，我们使用了文本类和角落样式属性事件，通过定义角落样式为圆形来改变帆布型文本的角落样式。在第二个例子中，我们使用了文本类和角样式属性事件，通过定义角样式为矩形来改变画布型文本的角样式，这是一个默认的角样式值。