fabric.js 中的圆形控制旋钮答案

【问题标题】：Rounded control-knobs in fabric.jsfabric.js 中的圆形控制旋钮
【发布时间】：2020-04-23 18:03:54
【问题描述】：

考虑这个例子：

 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 不起作用。顺便问一下，为什么在移动对象时控件的颜色会发生变化？怎么调整？

【问题讨论】：

标签： javascript fabricjs

【解决方案1】：

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

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

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

希望这会有所帮助。

【讨论】：

stackoverflow.com/a/33527317/190695 这回答了如何自定义控制旋钮。

【解决方案2】：

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

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

Documentation here

【讨论】：

【解决方案3】：

如果您希望全局更改此设置，您可以修改 fabric 对象，如下所示：

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

【讨论】：