Fabric.js 如何改变canvas文本的边框颜色

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

文本对象包含不同的属性，但要改变文本画布的边界颜色，可以使用其中一个颜色属性，即borderColor。Fabric.js文本对象的borderColor属性指定了该对象的边界颜色。可以使用任何有效的CSS颜色值作为边界颜色。你也可以使用setBorderColor()来改变文本对象的边界颜色。

语法

以下是文本对象的语法-

fabric.Text(text, borderColor: string);

参数

text – 用于指定必须写入的文本
borderColor – 指定边界颜色

操作步骤

按照下面给出的步骤，使用Fabric.js改变画布型文本的边框颜色。

第1步 --首先，我们在HTML文件中包含Fabric.js库，并在文档的头部添加脚本标签。

第2步 --接下来，让我们为HTML文件主体创建一个画布元素

第3步 --然后，我们在文档正文中添加一个脚本标签，初始化一个新的fabric.Canvas对象，并创建一个fabric.Text对象。

第4步 - 最后，我们将文本对象添加到画布上，并使用set方法和borderColor属性将边框颜色设置为所需颜色

第5步 - 将文本对象添加到画布上

例子

在这个例子中，我们将学习如何使用borderColor属性来改变画布文本的边框颜色。

<html>
   <head>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
   </head>
   <body>
      <h2>Changing the border-color of a canvas text using Fabric.js</h2>
      <p>Select the textbox to see that the controlling corners</p>
      <canvas id="idCanvas" width="400" height="200"></canvas>
      <script>
         // Initializing the canvas element
         var canvas = new fabric.Canvas('idCanvas'); 
         // Create a instance of fabric.Text class
         var content = new fabric.Text('Welcome to Tutorials Toint', {
            left: 100,
            top: 100,
            fontSize: 30,
            fill: '#000000',
            stroke: '#ff0000',
            strokeWidth: 2,
            borderColor: '#ff0000' 
         }); 
         // Add the text object to the canvas
         canvas.add(content); 
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script> 
   </body> 
</html>

fabric.Text对象的borderColor属性控制文本周围的边界颜色。在这个例子中，边框颜色被设置为红色，使用十六进制的颜色代码#ff0000。

例子

让我们看看另一个例子，我们使用borderColor属性的set( )来改变一个文本画布的边框颜色。

<html>
   <head> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
   </head>
   <body>
      <h2>Changing the border-color of a canvas text using Fabric.js</h2>
      <p>Select the textbox to see that the controlling corners</p>
      <canvas id="idCanvas" width="500" height="200"></canvas>
      <script> 
         var canvas = new fabric.Canvas('idCanvas'); 
         var contenttext = new fabric.Text('Welcome To Tutorials Point', {
             left: 100,
             top: 100,
             fontSize: 30,
             fill: '#000000',
             stroke: '#ff0000', 
             strokeWidth: 2 
         }); 
         canvas.add(contenttext); 
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
         text.set({ borderColor: '#00ff00' }); 
         canvas.renderAll(); 
      </script>
   </body>
</html>