fabric.js官网(http://fabricjs.com/)
- fabric.js官方网站给出了控制器样式的修改,但仅局限于边框颜色以及边框节点形状的等基本样式的修改方式,无法修改添加图标,如图
- 官方文档修改样式代码
fabric.Object.prototype.set({
borderColor: 'red',
cornerColor: 'red', //激活状态角落图标的填充颜色
cornerStrokeColor: "", //激活状态角落图标的边框颜色
borderOpacityWhenMoving: 1,
borderScaleFactor: 1,
cornerSize: 8,
cornerStyle: "rect", //rect,circle
centeredScaling: false, //角落放大缩小是否是以图形中心为放大原点
centeredRotation: true, //旋转按钮旋转是否是左上角为圆心旋转
transparentCorners: false, //激活状态角落的图标是否透明
rotatingPointOffset: 20, //旋转距旋转体的距离
originX: "center",
originY: "center",
lockUniScaling: false, //只显示四角的操作
hasRotatingPoint: true, //是否显示旋转按钮
selectionDashArray: [5, 5]
});
- 引用fabric.js的扩展插件fabricjs-customise-controls-extension来完成控制器样式的修改,github地址fabricjs-customise-controls-extension。
- 扩展插件修改控制器样式代码
//控制器
fabric.Object.prototype.customiseCornerIcons({
settings: {
borderColor: '#8d6efa',
cornerSize:8,
cornerPadding: 0,
},
tl: {
icon: require('../icons/rect.svg'),
},
tr: {
icon: require('../icons/rect.svg'),
},
bl: {
icon: require('../icons/rect.svg'),
},
br: {
icon: require('../icons/rect.svg'),
},
mb: {
icon: require('../icons/rect.svg'),
},
mt: {
icon: require('../icons/rect.svg'),
},
ml: {
icon: require('../icons/rect.svg'),
},
mr: {
icon: require('../icons/rect.svg'),
},
mtr: {
icon: require('../icons/xuanzhuan.svg'),
settings: {
borderColor: '#8d6efa',
cornerBackgroundColor: '#8d6efa',
cornerSize:15,
cornerShape: 'circle',
cornerPadding: 0
},
},
}, function() {
// this.$store.state.canvas.renderAll();
} );
github上有更为详细的例子。