所属分类：web前端开发
在本教程中，我们将学习如何使用 FabricJS 设置 Line 控制角的颜色。 Line 元素是 FabricJS 中提供的基本元素之一。它用于创建直线。由于线元素在几何上是一维的并且不包含内部，因此它们永远不会被填充。我们可以通过创建fabric.Line的实例来创建线条对象，指定线条的X和Y坐标并将其添加到画布中。 cornerColor 属性允许我们在对象处于活动状态时操纵控制角的颜色。
微博登录
QQ登录new fabric.Line( points: Array, { cornerColor: String }: Object)
points - 此参数接受一个点的Array，它确定 (x1, y1) 和 (x2, y2)值，分别是线的起点和终点的 x 轴坐标和 y 轴坐标。
选项（可选） - 此参数是一个对象，它为我们的目的。使用此参数，可以更改与 cornerColor 为属性的对象相关的颜色、光标、描边宽度和许多其他属性。
cornerColor - 该属性接受一个String，它允许我们为角分配颜色当主动选择对象时控制角点。默认值为rgb(178,204,255)。
让我们看一个使用 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>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>
我们还可以分配一个 RGBA 值，而不是将简单的颜色名称作为 String 值传递给键。 RGBA 代表红、绿、蓝和 alpha，其中 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>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>
