fabric.js官网(http://fabricjs.com/)
- fabric.js官方网站给出了控制器样式的修改，但仅局限于边框颜色以及边框节点形状的等基本样式的修改方式，无法修改添加图标，如图
- 官方文档修改样式代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | 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。
- 扩展插件修改控制器样式代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | //控制器 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上有更为详细的例子。