Javascript 边界框外观-使用fabricjs控制自定义

我想知道是否有办法更改边界框图标，我阅读了fabric.js中的源代码，它为边界框生成方形框，但我想将其更改为圆形或更改为自定义外观。您能给我一些建议吗？

检查以下示例：

例2：

var canvas = new fabric.Canvas('c3');
  canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));

  canvas.item(0).set({
    borderColor: 'red',
    cornerColor: 'green',
    cornerSize: 6,
    transparentCorners: false
  });
  canvas.setActiveObject(canvas.item(0));

---

自定义控件的最快方法是编写自己的

\u drawControl

函数，并使其与fabricjs标准兼容以覆盖它。 请记住，此函数在每次渲染时调用9次，因此请尽量减少代码和图形。另外，如果修改了上下文（ctx），请记住使用

.save

和

.restore

以避免弄乱渲染管道

FabricJs将调用函数，使

top

和

left

为矩形做好准备，因此角点将位于

top+size/2

和

left+size/2

，其中size是

this.cornerSize

function newControls(control, ctx, methodName, left, top) {
  if (!this.isControlVisible(control)) {
        return;
      }
      var size = this.cornerSize;
      isVML() || this.transparentCorners || ctx.clearRect(left, top, size, size);
      ctx.arc(left + size/2, top + size/2, size/2, 0, 2 * Math.PI, false);
      ctx.stroke();
}

fabric.Object.prototype._drawControl = newControls;

函数newControls（控件、ctx、方法名、左、上）{
如果（！this.isControl可见（control））{
返回；
}
var size=此.cornerSize；
this.transparentCorners | | ctx.clearRect（左、上、大小、大小）；
ctx.beginPath（）；
ctx.arc（左+大小/2，上+大小/2，大小/2，0，2*Math.PI，假）；
ctx.stroke（）；
}
fabric.Object.prototype.\u drawControl=newControls；
fabric.Object.prototype.cornerSize=15；
var canvas=newfabric.canvas（'c'）；
add（newfabric.Rect（{width:100，height:100，top:50，left:50}））；
canvas.setActiveObject（canvas.getObjects（）[0]）

对不起，这不是我问题的答案。我需要自定义9个小框的边界框，我想要圆形而不是小正方形。目前没有内置的更改对象控件形状的支持。你可能可以在上面破解一些东西。当对象：selected发生时，可能我需要覆盖边界框。我知道这个问题很老，现在可能不符合你的兴趣，但请查看并批准它，以便其他用户可以从中受益。我发现了一个问题。可能是我的实现，但圆角在一个盒子里，我猜是原来的角。有没有办法防止这种情况发生？样品：谢谢！理想情况下，将只是一个圆（相同的颜色填充和边框），您不应该在绘图之前清除框（clearRect）。如果你想要白色的圆圈，做笔划和填充。用白色填充。