Fabric.js 如何改变画布圆形的选择背景颜色

Fabric.js的Circle类是通过使用fabric.Circle对象来提供圆的形状。圆圈对象用来提供圆的形状，圆是可移动的，它可以根据要求进行拉伸。对于笔画、颜色、宽度、高度和填充颜色，Circle是可定制的。与canvas类相比，Circle类提供了丰富的功能。

圆环类包含不同的属性，但要改变一个画布圆环的选择背景颜色，可以使用selectionBackgroundColor属性。Fabric.js类的selectionBackgroundColor属性指定改变一个圆的选择背景颜色。

语法

以下是圆圈对象的语法-

fabric.Circle({
   radius: number,
   : string
});

参数

radius – 用于指定圆的半径。
selectionBackgroundColor – 指定选区背景的颜色。

操作步骤

按照下面给出的步骤，使用Fabric.js改变画布圆圈的选择背景颜色。

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

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

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

第 4 步–创建一个新的Fabric.js圆形类对象，并将selectionBackgroundColor属性设置为所需的圆形值。

第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 the Selection background color of a canvas circle</h2>
      <p>Please select the circle canvas to see the selection background color</p>
      <p>The selectionBackgroundColor is set to violet</p>
      <canvas id="selectioncanvas"></canvas>
      <script>
         var canvas = new fabric.Canvas('selectioncanvas'); 
         var circle2 = new fabric.Circle({
            top: 50,
            left: 50,
            radius: 80,
            selectionBackgroundColor: 'violet'
         }); 

         canvas.add(circle2);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(650);
      </script> 
   </body> 
</html>

这段代码将用指定的ID创建一个新的画布圆环元素，创建一个新的Fabric.js圆环类对象，使用selectionBackgroundColor属性改变选择的背景颜色，并将圆环对象添加到画布上。圆圈将以背景色出现在画布上。

例子

让我们看看另一个例子，我们可以通过使用selectionBackgroundColor属性和左、上、填充、半径等尺寸来改变选择的背景颜色。

<html>
   <head> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
   </head>
   <body>
      <h2>Changing the Selection background color of a canvas circle using Fabric.js</h2>
      <p>Please select the circle canvas to see the selection background color</p>
      <p>The selectionBackgroundColor is set to yellow</p>
      <canvas id="colorcanvas"></canvas>
      <script> 
         // Initiating a canvas instance
         var canvas = new fabric.Canvas('colorcanvas'); 

         // Create a instance of fabric.Circle Class
         var circle4 = new fabric.Circle({
              radius: 60,
            fill: 'blue',
            left: 50,
            top: 50,
             selectionBackgroundColor: 'yellow'
         }); 

         // Adding the Canvas
         canvas.add(circle4);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(450);
      </script> 
   </body> 
</html>

这段代码将以指定的ID和尺寸创建一个新的画布圆形元素，创建一个新的Fabric.js Circle类对象，使用selectionBackgroundColor方法改变选定的背景颜色，并将该类对象添加到画布中。圆圈将出现在画布上，其尺寸与我们在例子中定义的一样。

总结

在这篇文章中，我们已经演示了如何改变画布圆圈的选择背景颜色，并举了一些例子。我们在这里看到了两个不同的例子。在第一个例子中，我们使用了’selectionBackgroundColor’属性来改变选区的背景颜色。在第二个例子中，我们使用了’selectionBackgroundColor’方法和各种尺寸参数，如左、顶、填充等，来改变选区的背景颜色。