fablic 矩形多边形展示删除按钮

标注的矩形框或者多边形框展示删除按钮；
官网有一个例子
我原本想着按照他这个思路，很简单的；
可是当我在使用的过程中，遇到了一些问题，多变想不展示删除按钮；并且如果之前有矩形，无法渲然删除按钮，只有新增加的可以有删除按钮；所以我就换了一种方案：使用文本；
需求：鼠标滑入图形的时候展示删除按钮；滑走的时候隐藏删除按钮；
props.showDeleteControl 字段代表是否展示删除按钮；

drawText方法如下：

// 文本
const drawText = (text: string, shape: any, textOthers?: OthersConfigModel) => {
  return new fabric.Text(text, {
    type: DrawType.Text,
    left: shape.left + shape.width,
    // top: shape.top + ((textOthers && textOthers.topToRect) ?? -20),
    top: shape.top - 20,
    selectable: false,
    fill: 'red',
    ...textOthers
  });
};
1
2
3
4
5
6
7
8
9
10
11
12

// 添加删除按钮
const addDeleteControl = (object: any) => {
  if (props.showDeleteControl) {
    // 创建删除按钮对象
    const deleteBtn = drawText('X', object, {
      // 有shapeId 待表是之前的 默认隐藏删除按钮； 如果是新画的 则默认显示删除按钮
      visible: object.shapeId ? false : true
    });

    // 添加鼠标进入事件处理程序
    object.on('mouseover', function () {
      // 隐藏其他的删除按钮
      hiddenDeleteControl();
      canvas.value.setActiveObject(object); // 设置为当前活跃
      deleteBtn.visible = true;
      canvas.value.renderAll();
    });
    object.on('mousemove', function () {
      deleteBtn.set({
        left: object.left + object.width,
        top: object.top - 20
      });
      // 手动更新删除按钮的选中位置  ！！！！非常重要
      deleteBtn.setCoords();
    });
    // 添加点击事件处理程序
    deleteBtn.on('mousedown', function () {
      console.log('mousedown');
    });
    canvas.value?.add(deleteBtn);
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

过程中遇到的一个问题是：我移动了矩形，但是删除按钮不可选中，起初认为是不可选中，最后才知道是选中位置没更新！！！所以需要手动更新删除按钮的选中位置；

deleteBtn.setCoords();
1

上面的思路主要是 每个图形附近增加一个删除按钮；虽然你页面上看到的图形只有1个。但是canvas中渲染的有两个；

也可以通过图片来替代删除文本

// 创建删除按钮图标
    fabric.Image.fromURL(deleteIcon, deleteBtn => {
      deleteBtn.set({
        left: object.left + object.width - 20,
        top: object.top - 50,
        selectable: false,
        visible: false,
        hasControls: false, // 隐藏控制点
        hasBorders: false // 隐藏边框
      });
      // 缩放图片到指定宽度
      deleteBtn.scaleToWidth(30);
      // 添加点击事件处理程序
      deleteBtn.on('mousedown', function () {
        console.log('mousedown');
      });
      canvas.value.add(deleteBtn);
      // // 添加鼠标进入事件处理程序
      object.on('mouseover', () => {
        // 隐藏其他的删除按钮
        hiddenDeleteControl();
        canvas.value.setActiveObject(object); // 设置为当前活跃
        deleteBtn.visible = true;
        canvas.value.renderAll();
      });
      object.on('mousemove', () => {
        deleteBtn.set({
          left: object.left + object.width,
          top: object.top - 20
        });
        // 手动更新删除按钮的选中位置  ！！！！非常重要
        deleteBtn.setCoords();
      });
    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

但这种方式更会增加图形的渲染， 1个图形会多渲染2个图形；