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

Question

Fabric.js非常方便,它的交互模式允许像Inkscape这样的矢量绘图程序中操作对象.我想将此容量用于我的Web应用程序项目,其中需要一种拼贴编辑器.

默认情况下,选择对象时,边框和调整大小手柄显示为蓝色,手柄为大蓝色空心方块.我想改变它以符合我的项目设计.

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

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

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

Answer 1

您可以全局覆盖默认的对象控件属性,并根据您的偏好设置它们.以下是您的代码的外观:

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

您可以在代码的开头设置它.这将覆盖控件的默认样式,并将在任何地方应用.你可以在这里找到一个工作小提琴:http://jsfiddle.net/apyeLeut/1/

Answer 2

您可以在object:selected事件中覆盖该行为.所以,例如,

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

小提琴