如何在PaperJS的KeyDown事件中删除选中的图形项

问题核心诱因 #

• 仅用单个全局变量存储选中项时，新增图形会覆盖之前的选中项引用，导致按键删除时只能识别到最后添加的项
• 给每个图形单独绑定键盘删除事件时，变量作用域冲突会导致只有最后绑定的图形能触发删除逻辑
• 未正确在鼠标选中事件中同步更新当前选中项的引用

修复步骤 #

1. 声明全局存储变量 #

首先声明全局变量存储当前选中的图形项，避免作用域覆盖问题：

let currentSelectedItem = null

2. 修正鼠标选中逻辑 #

在鼠标悬停事件中同步更新选中状态与全局变量：

// 鼠标进入图形时触发选中
project.activeLayer.on('mouseenter', function(event) {
  // 清空上一个选中项的选中状态
  if (currentSelectedItem) {
    currentSelectedItem.selected = false
  }
  // 更新当前选中项
  currentSelectedItem = event.item
  currentSelectedItem.selected = true
})

// 鼠标移出图形时清空选中（可根据交互需求调整）
project.activeLayer.on('mouseleave', function(event) {
  if (currentSelectedItem) {
    currentSelectedItem.selected = false
    currentSelectedItem = null
  }
})

3. 统一绑定全局删除逻辑 #

不要给单个图形绑定删除事件，统一在全局监听键盘按键，读取当前选中项执行删除：

// 适配PaperJS内置事件的写法
view.on('keydown', function(event) {
  if (event.key.toLowerCase() === 'd' && currentSelectedItem) {
    currentSelectedItem.remove()
    currentSelectedItem = null
  }
})

扩展说明 #

如果需要支持多选删除，只需将全局存储的单个变量替换为数组：

• 选中项时将图形项push到数组中，取消选中时splice对应项
• 按下删除键时遍历数组逐个调用remove()方法，最后清空数组即可

内容的提问来源于stack exchange，提问作者Riccardo Volpe