如何使用 Fabric.js 缩放画布圆圈的控制边框？

在使用 Fabric.js 创建圆圈时，我们可以使用控制点来缩放和调整它们的大小。以下是如何为 Fabric.js 圆形添加控制点和控制边框：

// 创建新圆
var circle = new fabric.Circle({
  left: 100,
  top: 100,
  radius: 50,
  fill: 'red'
});

// 添加圆到 canvas
canvas.add(circle);

// 修改圆的控制点样式
circle.setControlsVisibility({
  mt: false,
  mb: false,
  ml: false,
  mr: false,
  tl: true,
  tr: true,
  bl: true,
  br: true,
  mtr: true
});

// 修改圆的控制边框样式
circle.set({
  borderColor: 'blue',
  cornerColor: 'blue',
  cornerSize: 6,
  transparentCorners: false,
  hasBorders: true,
  hasControls: false,
  lockMovementX: true,
  lockMovementY: true
});

// 绘制 canvas
canvas.renderAll();

上述代码中，我们首先创建一个新圆，接着向 canvas 添加它。然后，我们使用 setControlsVisibility 方法修改圆的控制点样式。最后，我们使用 set 方法修改圆的控制边框样式。

这样，我们就可以使用控制点来缩放圆的大小，同时控制边框也将变为蓝色。

需要注意的是，在 Canvas 中使用控制点进行缩放时，一定要保持它们的比例。否则，圆可能会变形或失去原有的比例。