在本教程中，我们将使用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>
以上就是如何使用fabricjs设置圆形控制角的颜色？的详细内容。