如何使用 FabricJS 隐藏圆的控制边框？

1. 什么是FabricJS

FabricJS是一个基于HTML5 Canvas的Javascript库，可以用于创建交互式的图形应用程序。它提供了丰富的API和功能，使开发人员可以轻松地操作Canvas元素。

2. 隐藏圆的控制边框

2.1 创建圆

在FabricJS中，创建一个圆可以使用new fabric.Circle()方法。以下是一个创建圆的示例：

var circle = new fabric.Circle({
  radius: 50, // 半径
  fill: 'red', // 填充颜色
  left: 100, // 距离画布左侧的位置
  top: 100 // 距离画布顶部的位置
});
canvas.add(circle); // 将圆添加到画布上

运行以上代码，会在画布上创建一个红色的圆形。

2.2 隐藏控制边框

当我们在画布上创建一个对象时（如圆形），默认会显示出控制边框，可用于调整对象的大小、位置和旋转等。但是，有时我们可能不需要这些控制边框，希望将它们隐藏起来。我们可以通过以下方式实现：

circle.set({
  borderColor: 'transparent', // 边框颜色设为透明
  cornerColor: 'transparent', // 控制点颜色设为透明
  cornerSize: 0, // 控制点大小设为0
  cornerStyle: 'circle', // 控制点形状为圆形
  transparentCorners: true // 控制点设为透明
});

以上代码中，我们使用了set()方法来设置圆的属性。将边框颜色、控制点颜色、控制点大小和控制点设为透明或0，即可将它们隐藏。同时，我们设定了控制点形状为圆形。

现在，再次运行代码，就会发现圆的控制边框已经被隐藏了。

2.3 取消对象可选

在绘制对象时，默认情况下，对象是可以被选中的，即用户可以通过鼠标单击对象来选择它。如果希望取消某个对象的可选性，我们可以通过以下方式实现：

circle.set({
  selectable: false // 取消对象可选
});

以上代码设置了圆的selectable属性为false，即取消了该圆的可选性。此时，用户不能再通过鼠标单击该圆来选中它。

2.4 完整代码示例

下面是一个完整的示例，它将创建一个圆并将控制边框隐藏：

var circle = new fabric.Circle({
  radius: 50, // 半径
  fill: 'red', // 填充颜色
  left: 100, // 距离画布左侧的位置
  top: 100 // 距离画布顶部的位置
});
circle.set({
  borderColor: 'transparent', // 边框颜色设为透明
  cornerColor: 'transparent', // 控制点颜色设为透明
  cornerSize: 0, // 控制点大小设为0
  cornerStyle: 'circle', // 控制点形状为圆形
  transparentCorners: true, // 控制点设为透明
  selectable: false // 取消对象可选
});
canvas.add(circle); // 将圆添加到画布上

运行以上代码，就可以看到一个没有控制边框的圆形。

3. 小结

在FabricJS中，我们可以通过设置对象的属性来隐藏控制边框。同时，我们还可以取消某个对象的可选性，以防止用户选中它。这些功能非常实用，使我们能够更好地控制Canvas元素。