Javascript fabric.js中的圆形控制旋钮

考虑这个例子：

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

  canvas.item(0).set({
    borderColor: 'red',
    cornerColor: 'green',
    cornerSize: 10,
    cornerRadius: 10,
    transparentCorners: false
  });
  canvas.setActiveObject(canvas.item(0));
  this.__canvases.push(canvas);

小提琴拉着

---

是否可以使控制旋钮呈圆形？设置转弯半径不起作用。顺便问一下，为什么移动对象时控件的颜色会改变？如何调整？

控件在移动时具有不透明度，默认设置为0.4。要防止出现这种情况，可以执行以下操作：

canvas.item(0).set({
 borderOpacityWhenMoving: 1
});

据我所知，控制旋钮是不能改变的。您必须更改实际绘制控件的函数。这是在函数drawControls中完成的，该函数根据绘制控件的设置使用StrokRect或fillRect。您应该能够更改函数以绘制圆

---

希望这有帮助

对于圆形旋钮控件，请使用

cornerStyle:String

在要添加到画布的元素中，指定控件样式“rect”或“circle”

let text = new fabric.Text('Hello world')
text.cornerStyle = 'circle'
canvas.add(text)

---

如果您希望在全局范围内更改此设置，可以修改

结构

对象，如下所示：

fabric.Object.prototype.set({
    borderColor: 'red',
    cornerColor: 'pink',
    cornerStyle: 'circle',
    padding: 10,
    transparentCorners: false,
});

这回答了如何自定义控制旋钮。