KineticJSで管理されるHTML5 Canvasでkeydownイベントをリッスンする方法

KineticJSで管理されるHTML5 Canvasでkeydownイベントをリッスンする方法

HTML5のcanvas要素は、デフォルトではキーボードフォーカスを受け取れないため、keydownイベントを扱うには少し工夫が必要です。この記事では、KineticJSで管理されるキャンバスに対してキーボードイベントを検知する方法を解説します。

keydownイベントをリッスンする基本的な方法

キーの押下を検知するには、押下状態を示すフラグとキーコードを組み合わせて判定します。

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

この方法では、キーが押されている間は常に条件が評価されるため、ゲームループなどで継続的にキー入力をチェックしたい場合に便利です。

Canvasでkeydownイベントをキャプチャする方法

canvas要素に直接keydownイベントをバインドするには、まず要素がフォーカスを受け取れるようにする必要があります。KineticJSのレイヤーから実際のcanvas要素を取得し、tabindex属性を設定してからフォーカスを当てます。

var canvas1 = layer.getCanvas()._canvas;
$(canvas1).attr('tabindex', 1);
canvas1.focus();

$(canvas1).keydown(function (event) {
    console.log(event);
});

コードのポイント

• layer.getCanvas()._canvas：KineticJSのレイヤーオブジェクトから、実際のDOM上のcanvas要素を取得します。
• attr('tabindex', 1)：canvas要素にtabindex属性を設定することで、キーボードフォーカスを受け取れる要素になります。
• canvas1.focus()：キャンバスにフォーカスを明示的に当てることで、keydownイベントが確実にキャンバスへ届くようになります。
• keydownイベントハンドラ：押されたキーの情報は、event.keyCodeやevent.keyなどのプロパティから取得できます。

この手法を使えば、KineticJSで描画したキャンバス上で矢印キーによるオブジェクト移動やショートカットキー操作など、キーボードを使ったインタラクションを簡単に実装できます。