fabric.js画布监听键盘事件吗? [英] fabric.js canvas listen for keyboard events?

问题描述

在我的Fabric应用程序中，我目前正在侦听某些按键，例如Delete键，并删除所有选定的元素.我听按键的方法是:

In my fabric application, I'm currently listening for certain key presses such as the delete key, and deleting any selected elements. My method of listening for key presses is:

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

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

I'm running into a problem though: I have other elements like text boxes on the page, and when typing in a text box, I don't want the delete key to delete any elements.

在此问题中，有一种方法被描述为将事件侦听器附加到HTML5画布:

In this question, there's a method described to attach an event listener to an HTML5 canvas:

canvas.tabIndex = 1000;

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

allows you to use canvas.addEventListener with keyboard events.

我可以在布料的画布上使用类似的东西吗?

Could I use something similar to this with fabric's canvas?

当我这样尝试时，

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

我从Chrome收到未捕获的TypeError:未定义不是函数".

I get "Uncaught TypeError: undefined is not a function" from Chrome.

推荐答案

这就是我最终要做的事情:我在布料所使用的画布周围有一个包装div，并在其中添加了事件侦听器包装器.

Here's what I've ended up doing: I've got a wrapper div around the canvas used by fabric, and I've added the event listener to this wrapper.

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

这完全像我想要的那样工作.侦听器不会接受在文本框中发生的 delete 按下.

This is working exactly like I want. The delete presses that happen inside a text box aren't picked up by the the listener.

这篇关于fabric.js画布监听键盘事件吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！