KineticJSが管理するHTML5-キャンバスでKeydown-Eventsを聴くには？

Question

Kineticjsで管理されているHtm5-Canvasにイベントリスナーを追加しようとしています（CanvasはKineticJSのステージ経由で作成されました）。

$（セレクタ）.keydown（関数（E）{...}）は、以下のセレクタと

：

• を

  私は（jQueryのを使用して）試しウィンドウ（）が動作していますが、ウィンドウ全体をリッスンしているためにうまくいきません。

• すべてキャンバスエレメント$（ 'canvas'）< - 動作していない
• KineticJSとそのキャンバスが<に埋め込まれているコンテナ、 -
• を働いていないし$（ 'kineticjs-コンテンツ' と（運動によって作成された）KineticJSのコンテナ事業部）.keydown（関数（）{...}）<から

のみ$（ウィンドウ）が働いている作業ではありません。キャンバス要素には、キーボードイベントの組み込みサポートがあることがわかっているプレーンなHtml5-Canvasで実験したところ、 私は、KineticJSがここで何か魔法をしていると思います。間違ったセレクタ - 使用を除外できます。

私はこのコードですべてのセレクターを確認：はconsole.log（$（セレクタ）.LENGTH）

誰もがここに助けることができますか？あらかじめThx！

Answer 1

キーボードイベントを受け入れるには、キャンバス要素にフォーカスがあることを確認する必要があります。 Unfotunately .focus（）メソッドは、Firefoxで私のために動作しませんでしたので、私はこれを試してみましたが、

$('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があります。あなたはそれにJavaScriptを含めることができる場合

Answer 3

、ここでのコードは次のとおりです。

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

Answer 4

私はこの（2日）で持っている限られた経験から、私はあなたが追加した各レイヤーがキャンバスになっているのを見、そうであれば

：あなたは何 @devnull69作品ばかり提案し、変数（すなわち topmostLayer）における最上層への参照を持っている、あなたは場所にこれで

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

を行うことができます

私はそれを私のアプリケーションに適所に持ち、うまくいきます。

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