fabric.js如何监听画布键盘事件？

Question

在我的布料应用程序中，我目前正在监听某些键的按键事件，例如删除键，然后删除任何已选择的元素。我的监听按键的方法是：

document.onkeydown = function(e) {
  if (46 === e.keyCode) {
  // 46 is Delete key
  // do stuff to delete selected elements
}

然而我遇到了一个问题：页面上还有其他元素，比如文本框，在输入文本时，我不希望删除键删除任何元素。

在这个问题中，描述了一种将事件监听器附加到HTML5画布的方法：

canvas.tabIndex = 1000;

允许您在键盘事件中使用canvas.addEventListener。

我能否在fabric的画布上使用类似的东西？

当我像这样尝试时，

var CANVAS = new fabric.Canvas('elemID', {selection: false})
CANVAS.tabIndex = 1000;
CANVAS.addEventListener("keydown", myfunc, false);

我从Chrome中得到了"Uncaught TypeError: undefined is not a function"的错误。

- WhiteHotLoveTiger

Answer 1

这是我的解决方案：我在包裹fabric画布的div上添加了事件监听器。

var canvasWrapper = document.getElementById('canvasWrap');
canvasWrapper.tabIndex = 1000;
canvasWrapper.addEventListener("keydown", myfunc, false);

这正是我想要的效果。文本框内发生的删除按键事件不会被监听器捕获。

- WhiteHotLoveTiger

---

这个解决方案适用于现代浏览器，但不适用于IE11。但是，将事件绑定到全局文档也不行。你可能会想要绑定到文档，所以这个肮脏的hack并没有真正解决任何问题。如果你想要绑定到文档，你可以简单地让你的删除函数检查画布对象的isEditing属性。如果用户正在编辑，则不做任何操作。如果没有，则删除活动对象。 - Jay

Answer 2

正如Jay所建议的：“如果用户正在编辑，请不要做任何操作。如果没有，则删除活动对象”。如果有人正在寻找完整的解决方案，这里就是它：

canvas= this.$refs.canvas  

checkDelete(e) {
    if (
      e.keyCode == 46 ||
      e.key == 'Delete' ||
      e.code == 'Delete' ||
      e.key == 'Backspace'
    ) {
      if (this.canvas.getActiveObject()) {
        if (this.canvas.getActiveObject().isEditing) {
          return
        }
        this.deleteObject()
      }
    }
  }
  
  
// Delete object
deleteObject() {
    this.canvasContext.remove(this.canvasContext.getActiveObject())
    this.canvasContext.renderAll()
 }

<div
  tabIndex="1000"
  id="canvasWrapper"
  @keyup="checkDelete($event)"
>
  <canvas ref="canvas"></canvas>
</div>

- Yogesh Yadav