html - 如何在 KineticJS 管理的 HTML5-Canvas 中收听 Keydown-Events？

Question

我正在尝试将事件侦听器添加到由 Kineticjs 管理的 Htm5-Canvas （画布是通过 KineticJS 的阶段创建的）。

我试过（使用jQuery）：

$(选择器).keydown( 函数(e) {... } )

使用以下选择器：

• 窗口（它正在工作，但它正在听整个窗口，因此不好）
• 所有画布元素 $('canvas') <-- 不工作
• 嵌入 KineticJS 及其画布的容器 <-- 不工作
• KineticJS（由 Kinetic 创建）的 Container-Div 与 $('.kineticjs-content').keydown( function() { ... } ) <--不工作

只有 $(window) 正在工作。在尝试了普通的 Html5-Canvas 之后，我发现 Canvas-Element 具有对键盘事件的内置支持。所以我认为，KineticJS 在这里做了一些神奇的事情。可以排除错误的选择器用法。

我使用以下代码检查了每个选择器：console.log( $(selector).length )

有人可以在这里帮忙吗？提前谢谢！

Answer 1

我建议使用其中一个键盘插件：

• http://robertwhurst.github.io/KeyboardJS/
• http://dmauro.github.io/Keypress/

它们与 KineticJS 一起工作得很好。

Answer 2

如果您可以在其中包含 javascript，则代码如下：

if(keyIsPressed && keycode == somenumber){
doSomething();
} 

Answer 3

见链接，你需要：

var canvas=layer.getCanvas()._canvas;
$(canvas).attr('tabindex', 0); // increase tabindex if needed
canvas.focus();
$(canvas).keydown(function (e) {
    console.log(e.keyCode); // your handler here
});

Answer 4

根据我对此（2天）的有限经验，我看到您添加的每一层都变成了一个画布，所以如果您在变量（即topmostLayer）中有对最顶层的引用，您可以这样做

var canvas = $(topmostLayer.getContext().canvas);

有了这个，@devnull69 的建议就可以了：

canvas.attr('tabindex', 0);
canvas.keydown(function (ev) { ... });

我在我的应用程序中安装了它并且工作正常。

Answer 5

截至目前On仅支持鼠标和触摸事件。

每个图层都有自己的画布，您可以在其中抓取和附加事件。

Answer 6

您必须确保 canvas 元素具有焦点，然后才能接受键盘事件。不幸的是 .focus() 方法在 Firefox 中对我不起作用，所以我尝试了这个，瞧

$('canvas').attr('tabindex', 0);
$('canvas').keydown(function(e) {
    alert(e.keyCode);
    e.preventDefault();    // to stop the key events from bubbling up
});

单击画布，它将获得焦点。