我们在编辑canvas的时候，想删除单个选中的元素或者多个选中的元素时怎么办呢？

今天我们就来简单的学习哈。

删除选中对象首先我们先封装一个回调函数，用来监听Delete键和Backspace，当触发是回调。

export const DeleteKey = (callBack: () => void) => {
  document.addEventListener('keydown', function (event) {
    // 检查是否按下删除键
    if (event.key === 'Backspace' || event.key === 'Delete') {
      // 在这里编写处理删除键的代码逻辑
      callBack && callBack();
    }
  });
};

在fabricjs中提供了getActiveObject方法，该方法会返回你选中的多个元素对象，正常理解就是循环这个返回然后单个删除就行；其实不然，这个方法实现不了。

我们需要通过getObjects方法将选中数据进行转换。从而得到一个数组，然后在通过clear函数进行循环删除即可。

当getObjects方法无法转换的时候就会抛出错误，这个时候他所返回的selectedCanvasObject是一个可删除的对象，直接删除即可。

完美收工。

const selectedCanvasObject = canvas.value.getActiveObject();
if (selectedCanvasObject) {
  try {
    const selectedObjects = selectedCanvasObject.getObjects(); // 获取选中对象的数组
    selectedObjects && clear(selectedObjects);
  } catch (error) {
    canvas.value.remove(selectedCanvasObject);
  }
  canvas.value.discardActiveObject();
  canvas.value.renderAll();
}

const clear = (list?: any[]) => {
  const imgs: any = list || canvas.value.getObjects();
  if (imgs && imgs.length) {
    for (const i in imgs) {
      canvas.value.remove(imgs[i]);
    }
  }
  canvas.value.renderAll();
};

保存同样的，我们先来封装一个保存图片的函数，这个很多人都会。

export const saveBase64Image = (base64: string, name?: string) => {
  // 将base64图片保存在本地
  const link = document.createElement('a');
  link.href = base64;
  link.setAttribute('download', name || '封面制作');
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};

将canvas转为base64，需要用到这个toDataURL方法。

这样简单就会返回一个base64，然后将其保存即可。

const save = () => {
  const base = canvas.value.toDataURL({
    format: 'png',
    left: 0,
    top: 0,
    width: canvas.value.width,
    height: canvas.value.height,
  });
  saveBase64Image(base);
};

层级

使用示例:

const rect: any = setRect();
// 将矩形添加到画布上
canvas.value.add(rect);
// 需要添加画布以后执行
rect.bringToFront();
// or
rect.moveTo(10);
// or
moveTo(moveTo， 10);

今天的学习就到这儿了，下次再更新。