Fabric.js 图像 cornerStrokeColor 属性

在 Fabric.js 中，cornerStrokeColor 属性用于设置选中图像的角边框颜色。通过该属性，我们可以自定义选中图像时的角边框颜色，并可以在视觉上突出显示选中状态。

语法

cornerStrokeColor 属性的语法如下：

obj.set({
    cornerStrokeColor: '#FF0000'
});

使用

下面我们通过代码示例来了解如何使用 cornerStrokeColor 属性。

var canvas = new fabric.Canvas('canvas');

var rect = new fabric.Rect({
  left: 100,
  top: 100,
  width: 100,
  height: 100,
  fill: '#007bff',
  stroke: '#48c6ef',
  strokeWidth: 2,
  cornerSize: 10,
  cornerStyle: 'circle',
  cornerColor: '#48c6ef',
  cornerStrokeColor: '#FF0000'
});

canvas.add(rect);

在上面的代码中，我们新建了一个 canvas 对象，并创建了一个矩形 rect。我们使用 cornerStrokeColor 属性将选中图像时的角边框颜色设置为红色。最后，我们将矩形添加到了画布上。

效果展示

下面是代码所生成的效果展示：

通过上面的代码示例，我们可以看到选中图像时的角边框颜色变成了红色，达到了突出显示选中状态的效果。

总结

cornerStrokeColor 属性是 Fabric.js 中用于设置选中图像角边框颜色的属性。通过设置该属性，我们可以自定义选中状态下角边框的颜色，从而实现视觉上的突出显示效果。