vue+fabric.js控制器配置

fabric中，绘制的图形可以缩放、平移，有时候需要对每个控制器修改，显示或隐藏。

由于Fabric目前的官方文档是英文的，阅读可能没那么流畅，这里推荐一个中文文档：http://funcion_woqu.gitee.io/fabric-doc/，同时记录一下自己最近在控制器这部分踩的坑。

一、控制器的显示、隐藏

如图，默认控制器是带有旋转：

去掉旋转，官方给的方法是：hasRotatingPoint: false

实际并没有生效，没有隐藏成功，继续查阅文档后，发现有另外的方法，如下：

// 这里rect是绘制的图形实例
// 下面是分别对每个控制器的显示/隐藏，false隐藏，true显示
rect.setControlsVisibility({
  // mt: false,
  // mb: false,
  // ml: false,
  // mr: false,
  // tr: false,
  // tl: false,
  // br: false,
  // bl: false,
  mtr: false, // 为true则middle-top-rotate控制器可用，false则不可用。
});

二、控制器样式全局配置

直接上代码：

// fabric为引入的 import { fabric } from 'fabric';
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]
});