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

Question

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

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

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

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

我如何才能达到文档中所述的相同级别的自定义并自动将其应用于整个 Canvas ，包括组选择？

Answer 1

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

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

您可以在代码的开头设置它。这将覆盖控件的默认样式，并将应用于所有地方。你可以在这里找到一个可用的 fiddle :http://jsfiddle.net/apyeLeut/1/