如何更改 Fabric.js 调整大小手柄的默认外观？

Question

Fabric.js 的交互模式非常方便，可以像在 Inkscape 等矢量绘图程序中那样操作对象。我想将此功能用于需要一种拼贴编辑器的 Web 应用程序项目。

默认情况下，选中对象时，边界框和调整大小手柄显示为蓝色，手柄为蓝色空心大方块。我想更改它以匹配我的项目设计。

文档有专门的页面介绍如何在此处执行此类自定义：http://fabricjs.com/customization/

使用上述指南，我可以获得更适合我的应用程序的选择框。但是这个解决方案是基于每个对象的。使用 Shift 键执行组选择时，手柄和边界框恢复为默认蓝色。

如何实现与文档中所述相同级别的自定义并将其自动应用于整个 canvas，包括组选择？

Answer 1

您可以在 object:selected 事件中覆盖该行为。例如，

canvas.on('object:selected',function(e){
     e.target.transparentCorners = false;
     e.target.borderColor = 'green';
     e.target.cornerColor = 'purple';
});

FIDDLE

Answer 2

您可以全局覆盖默认的对象控件属性并根据您的喜好进行设置。您的代码如下所示：

fabric.Object.prototype.set({
    transparentCorners: false,
    borderColor: '#ff00ff',
    cornerColor: '#ff0000'
});

您可以在代码的开头进行设置。这将覆盖控件的默认样式，并将应用于所有地方。您可以在此处找到有效的 fiddle：http://jsfiddle.net/apyeLeut/1/

Answer 3

我正在使用结构版本 1.7.19，我尝试按照进行操作，但在我的情况下不起作用。

作为替代方案，我提出了这个解决方案：

 fabric.Object.prototype.selectionColor ='rgba(255,119,0,0.3)';
 fabric.Object.prototype.cornerSize = 20;
 fabric.Object.prototype.transparentCorners = false;
 fabric.Object.prototype.cornerColor = '#eee';

我测试了以下情况：

文档准备好之前；
文档准备好后；
点击按钮后；

如何更改 Fabric.js 调整大小手柄的默认外观？

How to change default appearance of Fabric.js resize handles?

javascript

customization

fabricjs