介绍
Fabric.js 是一个用于创建交互式织物像互动性的面向对象的JavaScript库。它使您可以自由地绘制各种对象，如圆形、矩形、椭圆形、三角形、路径和图像。除此之外，Fabric.js 还可以轻松地创建文本、渐变、模式和父级对象。Fabric.js 具有一个单独的中央点，您可以从它开始旋转、反转、缩放和移动。
设置对象控制矩形的角样式
使用角度值
可以通过设置控制矩形角的样式属性 cornerStyle 来改变角的样式。默认情况下，这是一个 sqaure， 但是，您可以将其更改为其他角度。例如，设置为45度角：
var rect = new fabric.Rect({
width: 100,
height: 100,
left: 100,
top: 100,
fill: 'red'
});
rect.cornerStyle = '45o';
canvas.add(rect);
它的效果就是让您的矩形角变成一个45度的角：
注意：这样设置控制点角度值不支持小数，只支持0、45、90、135、180、225、270、315度角。
使用自定义角样式
如果您想要使用自定义的角样式，可以通过设置 cornerStyle 和 cornerColor 方法来实现。例如：
var rect = new fabric.Rect({
width: 100,
height: 100,
left: 100,
top: 100,
fill: 'red'
});
rect.cornerStyle = 'circle';
rect.cornerColor = 'green';
canvas.add(rect);
上面代码中的 cornerStyle 属性设置为 'circle'， cornerColor 属性则设置为 'green'。这样就会让控制点角变成了圆形，颜色为绿色：
注意： 下面的图片显示效果可能与代码略微不同，这会取决于您的 Fabric 版本以及选择的颜色和样式
当然，除了圆形，您还可以用其他形状来替代控制点角。
更改控制点角的大小
您还可以使用 cornerSize 方法来更改控制点角的大小。例如：
var rect = new fabric.Rect({
width: 100,
height: 100,
left: 100,
top: 100,
fill: 'red'
});
rect.cornerSize = 20;
canvas.add(rect);
上述代码将控制点角的大小更改为 20。效果如下：
注意：cornerSize 的默认值为 13，这意味着上面的变量将更改其大小。
圆形控制点的大小调整
使用 cornerSize 只能够适用于设置为矩形的控制点角，对于设置为圆形的角，可以使用 cornerRadius 来控制角的大小。
var rect = new fabric.Rect({
width: 100,
height: 100,
left: 100,
top: 100,
fill: 'red'
});
rect.cornerStyle = 'circle';
rect.cornerRadius = 10;
rect.cornerColor = 'green';
canvas.add(rect);
上述代码定义的 rect 的控制点角设置为这样:
样式是圆形：circle
半径大小为 10 像素：cornerRadius
颜色为绿色：cornerColor
效果如下：
总结
Fabric.js 是创建交互式织物和其他对象的快捷方式的 JavaScript 库。控制点角是其对象的一部分，您可以通过修改 cornerStyle、 cornerColor 和 cornerSize 的值来自定义控制点的角落样式。此功能对于用户提供视觉上的选择或交互式功能是非常重要的，并在 Fabric 和其他图形库中很常见。