11

Kineticjs によって管理されるHtm5 -Canvas にイベント リスナーを追加しようとしています(キャンバスは KineticJS のステージを介して作成されました)。

私は（jQueryを使用して）試してみました：

$(セレクター).keydown( 関数(e) {... } )

次のセレクターを使用します。

  • ウィンドウ（動作していますが、ウィンドウ全体をリッスンしているため、良くありません）
  • すべての Canvas-Elements $('canvas') <-- 動作しません
  • KineticJS とその Canvas が埋め込まれているコンテナ <- 動作しない
  • $('.kineticjs-content').keydown( function() { ... } ) を使用した KineticJS (Kinetic によって作成された) の Container-Div <- 動作しない

$(window) のみが機能しています。プレーンな Html5-Canvas で実験した後、Canvas-Element にはキーボード イベントのビルトイン サポートがあることがわかりました。つまり、KineticJS はここで魔法のようなことをしていると思います。間違ったセレクターの使用法を除外できます。

このコードですべてのセレクターをチェックしました: console.log( $(selector).length )

誰でもここで助けることができますか？事前にt​​hx！

4

6 に答える 6

4

そこにあるキーボードプラグインのいずれかを使用することをお勧めします。

これらは KineticJS とうまく連携します。

于 2013-08-15T17:13:15.257 に答える
0

現時点では、Onはマウス イベントとタッチ イベントのみをサポートしています。

各レイヤーには、イベントを取得して添付できる独自のキャンバスがあります。

于 2013-05-13T01:37:32.250 に答える
0

リンクを参照してください。必要なもの：

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
});
于 2014-04-11T03:50:08.467 に答える
0

これ（2日間）の限られた経験から、追加する各レイヤーがキャンバスになることがわかったので、変数（つまりtopmostLayer）の最上位レイヤーへの参照がある場合は、次のことができます

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

これが整っていれば、@ devnull69が提案したことはうまくいきます：

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

私は自分のアプリケーションに配置しており、正常に動作しています。

于 2013-07-29T14:29:57.490 に答える
-2

キーボードイベントを受け入れる前に、canvas要素にフォーカスがあることを確認する必要があります。残念ながら、Firefoxでは.focus（）メソッドが機能しなかったので、これを試してみました。

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

キャンバスをクリックすると、フォーカスが表示されます。

于 2012-09-05T13:16:14.733 に答える