FabricJS – 如何设置线条控制角的描边颜色?
fabricjsjavascripthtml5 canvas
在本教程中，我们将学习如何使用 FabricJS 设置线条控制角的描边颜色。线条元素是 FabricJS 中提供的基本元素之一。它用于创建直线。由于线条元素在几何上是一维的并且不包含内部，因此它们永远不会被填充。
我们可以通过创建 fabric.Line 实例、指定线条的 x 和 y 坐标并将其添加到画布来创建线条对象。 cornerStrokeColor 属性允许我们设置用于控制对象角的笔触颜色。
语法
new fabric.Line(points: Array , { cornerStrokeColor: String }: Object)
参数
points − 此参数接受一个 Array 点，该点确定 (x1, y1) 和 (x2, y2) 值，这些值分别是线的起点和终点的 x 轴和 y 轴坐标。
options(可选)− 此参数是一个 Object，它为我们的对象提供额外的自定义。使用此参数原点，可以更改与线对象相关的许多其他属性，其中 cornerStrokeColor 是其属性。
选项键
cornerStrokeColor − 该属性接受一个 String 值，该值确定控制角的笔触颜色。
示例
将 cornerStrokeColor 作为键传递，将颜色名称作为值传递
让我们看一个代码示例，以更改对象控制角的笔触颜色。在这里，我们已将 cornerStrokeColor 的值传递为"红色"。这将确保我们的控制角的笔触现在显示为红色。
<!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>Passing cornerStrokeColor as key with a Colour name as value</h2> <p> You can select the line object to see the stroke colour of controlling corners </p> <canvas id="canvas"></canvas> <script> // 启动一个canvas实例 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, cornerStrokeColor: "red" }); // 将其添加到画布 canvas.add(line); </script> </body> </html>
示例
禁用 transparentCorners 属性以了解 cornerColor 和 cornerStrokeColor 之间的区别
从此示例中我们可以看出，当 transparentCorners 设置为 false 时，cornerStrokeColor 只会改变描边颜色，而 cornerColor 属性则决定控制角本身的填充颜色。
<!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>Disabling transparentCorners property to understand the difference between cornerColor and cornerStrokeColor</h2> <p> You can select the line object to see the difference between cornerStrokeColor and cornerColor </p> <canvas id="canvas"></canvas> <script> // 启动一个canvas实例 var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiate a Line object var line1 = new fabric.Line([200, 100, 100, 40], { stroke: "blue", strokeWidth: 20, transparentCorners: false, cornerColor: "red" }); // Initiate another Line object var line2 = new fabric.Line([300, 100, 500, 40], { stroke: "green", strokeWidth: 20, transparentCorners: false, cornerStrokeColor: "red" }); // 将它们添加到画布 canvas.add(line1); canvas.add(line2); </script> </body> </html>
