3、Fabric.js 操作杆

此文可以接着上文看…

改变操作杆样式

function addSVGDraw() {
  fabric.loadSVGFromURL(VACUUM_PUMPS, (objects, options) => {
    let oImg = fabric.util.groupSVGElements(objects, options);
    oImg.scaleToWidth(200);

    oImg.set({
      left: 300,
      top: 300,
      // 框柱的样式
      transparentCorners: false, // 当为 true 时，对象的控制角在内部渲染为透明（即笔触而不是填充）
      hasBorders: true, // 当设置为 `false` 时，对象的控制边界不会被渲染
      hasControls: true, // 当设置为 `false` 时，对象的控件不显示并且不能用于操作对象
      cornerColor: '#13416e', // 控制对象角点的颜色（当它处于活动状态时）
      cornerStrokeColor: '#96cbf5', // 控制对象角的颜色（当它处于活动状态且transparentCorners为false时）
      cornerStyle: 'rect', // 指定控件的样式，“rect”或“circle”
      borderColor: '#96cbf5', // 控制对象边界的颜色（当对象处于活动状态时）
      cornerSize: 10, // 对象控制角的大小（以像素为单位）
      padding: 0,
      borderDashArray: [4, 4], // 指定对象边界的短划线模式的数组（hasBorder必须为true）
    });
    canvasContainer.add(oImg);
  });
}

控制操作杆显隐 setControlsVisibility

...
// 五个点隐藏
oImg.setControlsVisibility({
  ml: false, // 中左
  mb: false, // 中下
  mr: false, // 中右
  mt: false, // 中上
  mtr: true, // 旋转 显示
  bl: false, // 左下
  br: false, // 右下
  tl: false, // 左上
  tr: false, // 右上
});
...

添加自定义控制点 fabric.Control

在多种场景中，我们可能会有添加自定义控制点的需求，例如：删除操作、如果有元素连线的需求，我们需要监听四周操作点的点击事件等等…
我们会用到 fabric.Control ，下面先简单介绍一下常用的属性：

• visible：控制点是否显示，默认true。

• actionName：操作点的名称，因为默认是缩放，所以默认’scale’。

• x：操作点的相对位置，0,0是对象的中心，而-0.5（左）或0.5（右）是操作元素的左右边界线。

• y：操作点的相对位置，0,0是对象的中心，而-0.5（顶部）或0.5（底部）是操作元素的上下边界线。
  

• offsetX：控件相对于定义位置的水平偏移，以像素为单位；正偏移将控件向右移动，负偏移将控件向左移动。

• offsetY：控件相对于定义位置的垂直偏移，以像素为单位；正偏移将控件移到底部，负偏移将控件移动到顶部。

• sizeX：设置控件的长度。如果为null，则默认为对象的cornerSize。设置时应同时设置sizeX和sizeY。

• sizeY：设置控件的高度。如果为null，则默认为对象的cornerSize。设置时应同时设置sizeX和sizeY。

• cursorStyle：悬停控件时显示的Css光标样式。如果提供了方法“cursorStyleHandler”，则会忽略此属性。默认为’crosshair’。

• mouseDownHandler：鼠标放下监听方法。

• mouseUpHandler：处理鼠标向上的监听方法。

• calcCornerCoords：基于对象值返回此控件的坐标。

• render：自定义渲染。

下面是简单示例：

function addSVGDraw() {
  fabric.loadSVGFromURL(VACUUM_PUMPS, (objects, options) => {
    let oImg = fabric.util.groupSVGElements(objects, options);
    oImg.scaleToWidth(200);

    oImg.set({
      left: 300,
      top: 300,
      // 框柱的样式
      transparentCorners: false, // 当为 true 时，对象的控制角在内部渲染为透明（即笔触而不是填充）
      hasBorders: true, // 当设置为 `false` 时，对象的控制边界不会被渲染
      hasControls: true, // 当设置为 `false` 时，对象的控件不显示并且不能用于操作对象
      cornerColor: '#13416e', // 控制对象角点的颜色（当它处于活动状态时）
      cornerStrokeColor: '#96cbf5', // 控制对象角的颜色（当它处于活动状态且transparentCorners为false时）
      cornerStyle: 'rect', // 指定控件的样式，“rect”或“circle”
      borderColor: '#96cbf5', // 控制对象边界的颜色（当对象处于活动状态时）
      cornerSize: 10, // 对象控制角的大小（以像素为单位）
      padding: 0,
      borderDashArray: [4, 4], // 指定对象边界的短划线模式的数组（hasBorder必须为true）
    });
    // 五个点隐藏
    oImg.setControlsVisibility({
      ml: false, // 中左
      mb: false, // 中下
      mr: false, // 中右
      mt: false, // 中上
      mtr: true, // 旋转
      bl: false, // 左下
      br: false, // 右下
      tl: false, // 左上
      tr: false, // 右上
    });

    fabric.Image.fromURL(IcRotateA, (ooImg) => {
      // 左上
      oImg.controls.tlControl = new fabric.Control({
        visible: true, // 控制角的显隐
        x: -0.5,
        y: -0.5,
        offsetY: -20,
        offsetX: 0,
        cursorStyle: 'pointer',
        mouseDownHandler: (eventData, transform) => createLineDown(eventData, transform),
        mouseUpHandler: (eventData, transform) => createLineUp(eventData, transform),

        render: renderIcon(ooImg._element, 0),
        cornerSize: 24,
      });
    });
    console.log(oImg.controls);
    canvasContainer.add(oImg);
  });
}

// 渲染图标的方法
function renderIcon(image, initialAngle) {
  return function (ctx, left, top, styleOverride, fabricObject) {
    let size = 22;
    ctx.save();
    ctx.translate(left, top);
    ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle + initialAngle));
    ctx.drawImage(image, -size / 2, -size / 2, size, size);
    ctx.restore();
  };
}

function createLineDown(eventData, transform) {
  console.log('createLineDown', eventData, transform);
}

function createLineUp(eventData, transform) {
  console.log('createLineUp', eventData, transform);
}

下面是单击的按下抬起事件…