fabric js 在canvas上添加图片自定义control控制点

控制点不一定全部需要

因为做项目的时候需求是变换图片的控制点尽量少，如果只需要左右拉伸，就保留中间左右的点，如果需要上下加左右拉伸，那么只需要上下左右的点。重点就是image的方法setControlsVisibility。

保留上下左右的控制点

this.view = new fabric.Image(img, { // 这里就是普通的图片加载
      originX: 'center',
      originY: 'bottom',
      left: this.position.x,
      top: this.position.y,
      scaleX: this.scaleX,
      scaleY: this.scaleY,
      lockMovementX: true,
      lockMovementY: true,
      selectable: false
    });
    this.view.setControlsVisibility({   //这个方法是重点
      bl: false,
      br: false, 
      tl: false, 
      tr: false,
      mtr: false, 
 });

保留左右的控制点

this.view = new fabric.Image(img, {
      originX: 'center',
      originY: 'center',
      left: this.position.x,
      top: this.position.y,
      scaleX: this.scaleX,
      scaleY: this.scaleY,
      lockMovementX: true,
      lockMovementY: true,
      selectable: false
    });
    this.view.setControlsVisibility({
      mt: false, 
      mb: false, 
      bl: false,
      br: false, 
      tl: false, 
      tr: false,
      mtr: false, 
 });