fabric.js中的圆形控制旋钮

Question

考虑这个例子：

 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);

小提琴在http://jsfiddle.net/SsCh6/

是否可以使控制旋钮变圆？设置cornerRadius不起作用。顺便说一下，为什么移动物体时控件的颜色会发生变化？怎么能调整？

Answer 1

控件在移动时具有不透明度，默认情况下设置为0.4。为了防止这种情况，你可以这样做：

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

据我所知，控制旋钮无法更改。您必须更改实际绘制控件的功能。这是在函数drawControls中完成的，它使用strokeRect或fillRect，具体取决于绘制控件的设置。您应该能够更改该功能以绘制圆圈。

希望这会有所帮助。

Answer 2

对于圆形旋钮控件，在要添加到画布中的元素中使用cornerStyle :String，指定控件样式，“ rect”或“ circle”

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

Documentation here

Answer 3

如果要全局更改此设置，可以像这样修改fabric对象：

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