Как прослушать Keydown-события в управляемом KineticJS HTML5-Canvas?

Я пытаюсь добавить прослушиватель событий в Htm5-Canvas, который управляется Kineticjs (холст был создан с помощью этапа KineticJS).

Я опробовал (используя jQuery):

$(селектор).keydown(функция (e) {...})

со следующими Селекторами:

( работает, но он прослушивает все Окно и тем самым не очень хорошо)
Все холст-элементы $('canvas') < - не работает
Контейнер, в который встроены KineticJS и его Canvas < - не работает
Контейнер-Div KineticJS (созданный Kinetic) с $('. kineticjs-content'). keydown (function() {...}) < - не работает

Работает только $(window). После экспериментов с простым Html5-Canvas я понял, что Canvas-Element имеет встроенную поддержку для клавишных событий. Так что я думаю, KineticJS делает что-то волшебное здесь. Неправильное использование селектора может быть исключено.

Я проверил каждый Селектор с помощью этого кода: console.log($ (selector).length)

Может ли кто-нибудь помочь здесь? спасибо заранее!

Ответ 1

Я предлагаю использовать один из плагинов клавиатуры:

Они хорошо работают вместе с KineticJS.

Ответ 2

Если вы можете включить в него javascript, вот код:

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

Ответ 3

На данный момент On поддерживает только события мыши и касания.

Каждый слой имеет свой собственный canvas, который можно захватить и прикрепить к событиям.

Ответ 4

Из ограниченного опыта, который у меня есть с этим (2 дня), я увидел, что каждый добавляемый слой становится холстом, поэтому, если у вас есть ссылка на самый верхний слой в переменной (т.е. topmostLayer), вы можете сделать

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

С этим на месте, что @devnull69 предложил просто работает:

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

Я использую его в своем приложении и прекрасно работаю.

Ответ 5

см. ссылка, вам нужно:

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

Ответ 6

Вам нужно убедиться, что элемент canvas имеет фокус, прежде чем он сможет принимать события клавиатуры. К сожалению, метод .focus() не работал у меня в Firefox, поэтому я попробовал это и voilà

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

Нажмите на холст, и он будет иметь фокус.