fabric.js+angular11 快捷键删除、保存、撤销、上下左右箭头

最新推荐文章于 2024-09-11 15:33:18 发布

财富自由进行中

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量275

点赞数 4

文章标签： javascript fabric 前端

本文链接：https://blog.csdn.net/mango_lizhi/article/details/137082482

版权

监听时，判断当前选择的是否text或者textbox,如果是text或textbox，查看当前是否是编辑状态，不是编辑状态可以进行删除，编辑状态不能进行删除。

撤销、保存，需要阻止默认的行为

@HostListener('document:keydown', ['$event'])
onkeydown(event: KeyboardEvent) {
  const activeObject = this.canvas.getActiveObject();
  if (event.code === 'Backspace' || event.code === 'Delete') {
    if (activeObject) {
       const objects = activeObject._objects
       if (activeObject.type == 'textbox' || activeObject.type == 'text') {
          if (!activeObject.isEditing) {
            if (objects && objects.length > 1) {
              objects.forEach(obj => {
                  this.canvas.remove(obj)
                });
                this.canvas.discardActiveObject().renderAll();
            } else {
                this.canvas.remove(activeObject); //删除
            }
          }
       } else {
          if (objects && objects.length > 1) {
              objects.forEach(obj => {
                this.canvas.remove(obj)
              });
              this.canvas.discardActiveObject().renderAll();

            } else {
              this.canvas.remove(activeObject); //删除
            }
       }
    }
  } else if ((event.metaKey || event.ctrlKey) && event.key === 's') {
    event.preventDefault(); // 阻止默认保存行为
      console.log('Ctrl/Cmd + S pressed');
      // 在这里执行保存操作,需定义你自己的保存方法
      this.save()
  } else if ((event.ctrlKey || event.metaKey) && event.key === 'z') {
      event.preventDefault(); // 阻止默认的撤销操作
      //撤销操作
      this.undo()
  } else if (event.key === 'ArrowUp') {
    // 处理向上箭头键的逻辑
      if (activeObject) {
        event.preventDefault();
        activeObject.top -= 1;
        activeObject.setCoords();
        // 触发canvas的重新渲染
        this.canvas.requestRenderAll();
      }
  }else if (event.key === 'ArrowDown') {
      // 处理向下箭头键的逻辑
      if (activeObject) {
        event.preventDefault();
        activeObject.top += 1;
        activeObject.setCoords();
        // 触发canvas的重新渲染
        this.canvas.requestRenderAll();
      }
    } else if (event.key === 'ArrowLeft') {
      // 处理向左箭头键的逻辑
      if (activeObject) {
        event.preventDefault();
        activeObject.left -= 1;
        activeObject.setCoords();
        // 触发canvas的重新渲染
        this.canvas.requestRenderAll();
      }
    } else if (event.key === 'ArrowRight') {
      // 处理向右箭头键的逻辑
      if (activeObject) {
        event.preventDefault();
        activeObject.left += 1;
        activeObject.setCoords();
        // 触发canvas的重新渲染
        this.canvas.requestRenderAll();
      }
    }
}