¿Cómo escuchar Keydown-Events en un HTML5-Canvas KineticJS-managed?

Question

Estoy tratando de agregar un Oyente de eventos a un Htm5-Canvas que es administrado por Kineticjs (el Canvas fue creado a través de un Stage of KineticJS).

Probé (usando jQuery):

$ ( selector ) .keydown (función (e) {...})

con los siguientes Selectores:

• ventana ( está funcionando , pero está escuchando toda la ventana y, por lo tanto, no está bien)
• Todos los elementos de lienzo $ (''canvas'') <- no funcionan
• The Container, donde KineticJS y su Canvas están incrustados <- no funcionan
• El Container-Div of KineticJS (creado por Kinetic) con $ (''. Kineticjs-content''). Keydown (function () {...}) <- no funciona

Solo $ (ventana) está funcionando. Después de experimentar con Html5-Canvas, me di cuenta de que el Canvas-Element tiene Built-in-Support para Keyboard-Events. Entonces creo que KineticJS está haciendo algo mágico por aquí. Selector incorrecto: el uso puede ser excluido.

Comprobé cada Selector con este código: console.log ($ (selector) .length)

¿Alguien puede ayudar aquí? Thx por adelantado!

Answer 1

Deberá asegurarse de que el elemento canvas tenga el foco antes de que pueda aceptar eventos de teclado. Desgraciadamente, el método .focus () no me funcionaba en Firefox, así que lo intenté y voilà

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

Haga clic en el lienzo y tendrá el foco.

Answer 2

A partir de ahora, solo admite eventos de mouse y touch.

Cada capa tiene su propio lienzo al que puedes agarrar y adjuntar eventos.

Answer 3

Sugiero usar uno de los complementos del teclado:

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

Funcionan bien junto con KineticJS.

Answer 4

ver enlace , necesitas:

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 5

A partir de la experiencia limitada que tengo con esto (2 días), vi que cada capa que agregas se convierte en un lienzo, por lo que si tienes una referencia a la capa superior de una variable (es decir, la capa más topmostLayer ), puedes hacer

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

Con esto en su lugar, lo que @ devnull69 sugirió simplemente funciona:

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

Lo tengo en mi aplicación y funciona bien.

Answer 6

Si puede incluir javascript en él, aquí está el código:

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