如何使用 FabricJS 使矩形的控制角透明？

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样式即可轻松地自定义角的外观，并且可以完全自定义其外观。