एक किनेटिकजेएस-प्रबंधित एचटीएमएल 5-कैनवास में कीडाउन-घटनाओं को कैसे सुनें?

Question

मैं एक ईवेंट श्रोता को एक एचटीएम 5-कैनवास में जोड़ने की कोशिश कर रहा हूं जिसे Kineticjs द्वारा प्रबंधित किया जाता है (कैनवास कोनेटिकजेएस के चरण के माध्यम से बनाया गया था)।

$ (चयनकर्ता) .keydown (समारोह (ई) {...})

निम्नलिखित चयनकर्ता के साथ

:

• मैं (jQuery का उपयोग) बाहर करने की कोशिश की खिड़की (यह काम कर रहा है, लेकिन यह पूरी विंडो को सुन रहा है और इस तरह अच्छा नहीं है)

• सभी कैनवास-तत्व $ ('कैनवास') < - काम नहीं कर रहा
• कंटेनर, जहां KineticJS और उसके कैनवास < एम्बेडेड रहे हैं -
• काम नहीं कर $ ('। Kineticjs-सामग्री' के साथ KineticJS के कंटेनर-डिव (काइनेटिक द्वारा बनाई गई)) .keydown (function() {...}) < - काम नहीं कर रहा

केवल $ (विंडो) काम कर रहा है। सादा एचटीएमएल 5-कैनवास के साथ प्रयोग करने के बाद मुझे पता चला कि कैनवास-एलिमेंट में कीबोर्ड-घटनाओं के लिए अंतर्निहित समर्थन है। तो मुझे लगता है कि, KineticJS यहाँ चारों ओर कुछ जादू कर रहा है। गलत चयनकर्ता-उपयोग को बाहर रखा जा सकता है। console.log ($ (चयनकर्ता) .length)

किसी को भी यहाँ मदद कर सकते हैं:

मैं इस कोड के साथ हर चयनकर्ता जाँच की? अग्रिम में Thx!

Answer 1

आपको यह सुनिश्चित करना होगा कि कैनवास तत्व को कीबोर्ड ईवेंट स्वीकार करने से पहले फोकस हो। Unfotunately .focus() विधि फ़ायरफ़ॉक्स में मेरे लिए काम नहीं किया है, इसलिए मैं इस और देखा की कोशिश की

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

कैनवास पर क्लिक करें और यह ध्यान केंद्रित करना होगा।

Answer 2

अभी के रूप में On केवल माउस का समर्थन करता है और ईवेंट को स्पर्श करता है।

प्रत्येक परत का अपना canvas है जो आप ईवेंट को पकड़ और संलग्न कर सकते हैं।

Answer 3

आप इसे में जावास्क्रिप्ट शामिल कर सकते हैं, तो यहां कोड है:

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

Answer 4

सीमित अनुभव मैं इस (2 दिन) के साथ किया है से, मैंने देखा है कि प्रत्येक परत आप जोड़ना एक कैनवास हो जाता है, इसलिए यदि आप एक चर (यानी topmostLayer) में सबसे ऊपरी लेयर के लिए एक संदर्भ है, तो आप जगह में

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

इस के साथ

कर सकते हैं, क्या @devnull69 सुझाव सिर्फ काम करता है:

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

मेरे पास यह मेरे आवेदन में है और ठीक काम करता है।

Answer 5

मैं वहां कीबोर्ड प्लगइन्स से एक का उपयोग करने का सुझाव:

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

वे KineticJS के साथ एक साथ अच्छी तरह से काम करते हैं।

Answer 6

link देखते हैं, आप की जरूरत:

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