FabricJS – 如何设置线条控制角的颜色？

在本教程中，我们将学习如何使用 fabricjs 设置 line 控制角的颜色。 line 元素是 fabricjs 中提供的基本元素之一。它用于创建直线。由于线元素在几何上是一维的并且不包含内部，因此它们永远不会被填充。我们可以通过创建fabric.line的实例来创建线条对象，指定线条的x和y坐标并将其添加到画布中。 cornercolor 属性允许我们在对象处于活动状态时操纵控制角的颜色。
语法new fabric.line( points: array, { cornercolor: string }: object)
参数 points - 此参数接受一个点的array，它确定 (x1, y1) 和 (x2, y2)值，分别是线的起点和终点的 x 轴坐标和 y 轴坐标。
选项（可选） - 此参数是一个对象，它为我们的目的。使用此参数，可以更改与 cornercolor 为属性的对象相关的颜色、光标、描边宽度和许多其他属性。
选项键 cornercolor - 该属性接受一个string，它允许我们为角分配颜色当主动选择对象时控制角点。默认值为rgb(178,204,255)。
将 cornercolor 作为键传递，并以颜色名称作为值示例让我们看一个使用 cornercolor 属性更改颜色的代码示例。在本例中，我们为该键分配了“橙色”值，从而使控制角显示为橙色。
<!doctype html><html><head>  <script src=https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js></script></head><body> <h2>passing cornercolor as key with a color name as value</h2> <p> you can select the line object to see that the corner colour is orange </p> <canvas id=canvas></canvas> <script> // initiate a canvas instance var canvas = new fabric.canvas(canvas); canvas.setwidth(document.body.scrollwidth); canvas.setheight(250); // initiate a line object var line = new fabric.line([200, 100, 100, 40], { stroke: blue, strokewidth: 20, cornercolor: orange }); // add it to the canvas canvas.add(line); </script></body></html>
为 cornercolor 属性分配 rgba 值示例我们还可以分配一个 rgba 值，而不是将简单的颜色名称作为 string 值传递给键。 rgba 代表红、绿、蓝和 alpha，其中 alpha 是不透明度。让我们看一个代码示例来说明如何做到这一点。
<!doctype html><html><head>  <script src=https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js></script></head><body> <h2>assigning an rgba value to the cornercolor property</h2> <p> you can select the line object to see the corner colour </p> <canvas id=canvas></canvas> <script> // initiate a canvas instance var canvas = new fabric.canvas(canvas); canvas.setwidth(document.body.scrollwidth); canvas.setheight(250); // initiate a line object var line = new fabric.line([200, 100, 100, 40], { stroke: blue, strokewidth: 20, cornercolor: rgba(255,69,0, 0.8), }); // add it to the canvas canvas.add(line); </script></body></html>
以上就是fabricjs – 如何设置线条控制角的颜色？的详细内容。

FabricJS – 如何设置线条控制角的颜色？

推荐信息