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 lienzo se creó a través de un Stage of KineticJS).

probé (usando jQuery):

$ (selector ) .keydown (function (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 trabajar
• el recipiente, donde KineticJS y su lienzo se incrustan < - no trabajar
• El Envase-Div de KineticJS (creado por cinética) con $ ('kineticjs-contenido'.) .keydown (function() {...}) < - no trabajar

Sólo $ (ventana) está trabajando. 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.

que comprueba cada selector con este código: console.log ($ (selector) .length)

¿Alguien puede ayudar aquí? Thx por adelantado!

Answer 1

Tendrá que asegurarse de que el elemento canvas tenga el foco antes de que pueda aceptar eventos del teclado. Unfotunately el método .focus() no funcionaba para mí en Firefox, así que intentó esto 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 que tendrá el foco.

Answer 2

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

Cada capa tiene su propia canvas que puede tomar y adjuntar eventos.

Answer 3

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

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

Answer 4

De la limitada experiencia que tengo con este (2 días), vi que cada capa se agrega convierte en un lienzo, así que si usted tiene una referencia a la capa superior en una variable (es decir topmostLayer), se puede hacer

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

con esto en su lugar, lo que sugiere @devnull69 simplemente funciona:

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

Lo tengo en su lugar en mi aplicación y funciona bien.

Answer 5

sugiere emplear uno de los plugins de teclado por ahí:

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

trabajan bien juntos con KineticJS.

Answer 6

ver link, necesita:

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 
});