Come ascoltare gli eventi Keydown in un HTML5-Canvas gestito da KineticJS?

Question

Sto cercando di aggiungere un listener di eventi a un Htm5-Canvas che è gestito da Kineticjs (il Canvas è stato creato tramite uno stage di KineticJS).

ho provato (utilizzando jQuery):

$ (selettore) .keydown (function (e) {...})

con i seguenti selettori:

• finestra (sta funzionando, ma sta ascoltando l'intera finestra e quindi non è buona)
• Tutti gli elementi Canvas $ ('canvas') < - non funziona
• contenitore, dove KineticJS e la sua tela di canapa sono incorporati < - non funziona
• Il Container-Div di KineticJS (creato da Kinetic) con $ ('kineticjs-contenuti.') .keydown (function() {...}) < - non funziona

Solo $ (window) sta lavorando. Dopo aver sperimentato con semplice Html5-Canvas ho capito che l'elemento Canvas ha un supporto integrato per Keyboard-Events. Quindi penso che KineticJS stia facendo qualcosa di magico qui. Selettore errato: l'utilizzo può essere escluso.

ho controllato ogni selettore con questo codice: console.log ($ (selector) .length)

Chiunque può aiutare qui? Grazie in anticipo!

Answer 1

È necessario accertarsi che l'elemento canvas abbia lo stato attivo prima che possa accettare eventi di tastiera. Unfotunately il metodo .focus() non ha funzionato per me in Firefox, così ho provato questo e voilà

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

Fare clic sulla tela e si avrà la messa a fuoco.

Answer 2

A partire da ora On supporta solo gli eventi mouse e touch.

Ogni livello ha il proprio canvas a cui è possibile afferrare e allegare eventi.

Answer 3

Se è possibile includere javascript in esso, ecco il codice:

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

Answer 4

Dall'esperienza limitata che ho con questo (2 giorni), ho visto che ogni strato si aggiunge diventa una tela, quindi se si dispone di un riferimento al livello più alto in una variabile (cioè topmostLayer), si può fare

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

Con questo in luogo, ciò che ha suggerito @devnull69 funziona:

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

L'ho installato nella mia applicazione e funziona perfettamente.

Answer 5

Io suggerisco di usare uno dei plugin tastiera là fuori:

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

lavorano bene insieme KineticJS.

Answer 6

vedere link, è necessario:

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