fabric.js学习（二）之 fabric.js控制器样式的修改

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上有更为详细的例子。