1. 关于 FabricJS
FabricJS是一个JavaScript图形库，可用于创建交互式图像和Web应用程序中的矢量图形。它使开发人员可以轻松地在HTML5 canvas元素上绘制和编辑复杂的图形元素，例如文本、矩形、圆形、多边形和图像。该库开发人员社区活跃，已经成为开发HTML5应用程序时最受欢迎的JavaScript图形库之一。在FabricJS中，控制角用于控制对象的大小、旋转和变形。
2. 如何使矩形的控制角透明？
2.1 FabricJS矩形控制角及其默认样式
FabricJS矩形对象的控制角是一些小的矩形或方形，用于显示对象的大小调整锚点。默认情况下，这些角和矩形本身有相同的颜色。如下面的代码所示，创建一个矩形对象：
var canvas = new fabric.Canvas('canvas');
var rect = new fabric.Rect({
left: 100,
top: 100,
width: 200,
height: 200,
fill: 'red'
});
canvas.add(rect);
运行上述代码将在Canvas上创建一个红色填充的矩形，它有八个控制角。如下图所示：
2.2 修改控制角的样式
FabricJS为控制角提供了类似于CSS的样式表机制。您可以使用角的名称来指定角的样式。例如，要使左上角的颜色为蓝色，可以使用以下代码：
rect.setControlsVisibility({
tl: true, // 显示左上角
tr: false, // 隐藏右上角
bl: true, // 显示左下角
br: false, // 隐藏右下角
ml: true, // 显示中间左角
mr: true, // 显示中间右角
mt: true, // 显示中间顶角
mb: true // 显示中间底角
});
运行代码后，会发现控制角的状态已有所改变，如下图所示：
上述代码中，方法setControlsVisibility()接受一个对象作为参数，对象中的布尔值表示是否显示相应的角。例如，tl为左上角，tr为右上角。
2.3 使控制角透明
为了使控制角透明，可以将其颜色设置为transparent。下面是一个完整的示例代码：
rect.setControlsVisibility({
tl: true,
tr: false,
bl: true,
br: false,
ml: true,
mr: true,
mt: true,
mb: true
});
fabric.Object.prototype.transparentCorners = false;
rect.cornerColor = 'transparent';
rect.cornerStrokeColor = 'transparent';
rect.cornerStyle = 'rect';
rect.borderColor = 'transparent';
rect.transparentCorners = true;
canvas.renderAll();
上述代码使矩形对象的控制角全部透明了。实际上，控制角默认情况下是带有边框的。通过将cornerStrokeColor和borderColor设置为transparent即可隐藏边框。通过设置transparentCorners参数为true，可以禁用矩形边角的颜色反色（即透明部分显示成黑色）。
最终的效果如下图所示：
在此之上，您可以使用其他属性和样式来完全自定义控制角的外观，例如形状、大小、颜色和透明度等。
3. 结论
FabricJS是一个功能强大的JavaScript图形库，提供了用于创建和编辑矢量图形的丰富的API和功能。控制角在对象缩放和旋转时发挥重要作用。通过简单的CSS样式即可轻松地自定义角的外观，并且可以完全自定义其外观。