fabric.js学习（⼆）之fabric.js控制器样式的修改
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地址。
扩展插件修改控制器样式代码
//控制器
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'),
svg canvas
},
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.derAll();
});
github上有更为详细的例⼦。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。