如何使用FabricJS设置圆形控制角的颜色？

javascriptjavascript 2023-08-28 12:20:01 597
摘要： 在本教程中，我们将使用FabricJS来设置Circle的控制角的颜色。当对象处于活动状态时，cornerColor属性允许我们操纵控制角的颜色。语法newfabric.Circle({cornerColor:String}:Object)参数options（可选）-此参数是一...

如何使用FabricJS设置圆形控制角的颜色？

在本教程中，我们将使用FabricJS来设置Circle的控制角的颜色。当对象处于活动状态时，cornerColor属性允许我们操纵控制角的颜色。

语法

new fabric.Circle({ cornerColor: String }: Object)

参数

  • options（可选） - 此参数是一个对象，提供了对圆形进行其他自定义的选项。使用此参数，可以更改与cornerColor属性相关的对象的颜色、光标、描边宽度和许多其他属性。

选项键

  • cornerColor - 此属性接受一个字符串，允许我们为选定对象的控制角分配一种颜色。

示例1

将cornerColor作为键，并使用颜色名称作为值传递

让我们通过使用cornerColor属性来改变颜色的示例。在这种情况下，我们将值“black”分配给键，使控制角显示为黑色。

<!DOCTYPE html>
<html>
   <head>
      <!-- Adding the Fabric JS Library-->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
   </head>

   <body>
      <h2>Setting the colour of controlling corners of circle using FabricJS</h2>
      <p>Select the object and notice the color of its controlling corners. Here we have used the <b>cornerColor</b> property to set the corners black. </p>
      <canvas id="canvas"></canvas>
     
      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var cir = new fabric.Circle({
            left: 215,
            top: 100,
            fill: "white",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#daa520",
            cornerColor: "black"
         });
         
         // Adding it to the canvas
         canvas.add(cir);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

示例2

将RGBA值分配给cornerColor属性

我们可以将RGBA值分配给键的字符串值，而不仅仅是传递一个简单的颜色名称。RGBA代表红、绿、蓝和透明度（alpha）。让我们看一个示例，了解如何实现这一点−

<!DOCTYPE html>
<html>
   <head>
      <!-- Adding the Fabric JS Library-->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
   </head>

   <body>
      <h2>Setting the colour of controlling corners of circle using FabricJS</h2>
      <p>Select the object and notice the color of its controlling corners. Here we have used the <b>cornerColor</b> and assigned it an "rgba" value to set the corners purple. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var cir = new fabric.Circle({
            left: 215,
            top: 100,
            fill: "white",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#daa520",
            cornerColor: "rgb(255,20,147)"
         });

         // Adding it to the canvas
         canvas.add(cir);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

标签：