fabric.js 画布监听键盘事件？答案

【问题标题】：fabric.js canvas listen for keyboard events?fabric.js 画布监听键盘事件？
【发布时间】：2014-09-01 06:54:15
【问题描述】：

在我的结构应用程序中，我目前正在监听某些按键，例如删除键，并删除任何选定的元素。我监听按键的方法是：

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

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

在this question 中，描述了一种将事件侦听器附加到 HTML5 画布的方法：

canvas.tabIndex = 1000;

允许您将canvas.addEventListener 与键盘事件一起使用。

我可以在织物的画布上使用类似的东西吗？

当我这样尝试时，

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

我从 Chrome 收到“未捕获的类型错误：未定义不是函数”。

【问题讨论】：

标签： fabricjs keyboard-events

【解决方案1】：

这就是我最终要做的事情：我在 fabric 使用的画布周围有一个包装器 div，并且我已将事件侦听器添加到此包装器中。

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

这完全符合我的要求。在文本框中发生的 delete 按下不会被侦听器拾取。

【讨论】：

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

【解决方案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>

【讨论】：