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

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

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

$(селектор).keydown( function(e) {... } )

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

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

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

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

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


canvas events html html5-canvas kineticjs
person itinance    schedule 05.09.2012    source источник
comment
Вы уже нашли решение своего вопроса?   -  person Kaffee    schedule 05.07.2013

Ответы (6)


arrow_upward
4
arrow_downward

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

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

person luschn    schedule 15.08.2013

arrow_upward
1
arrow_downward

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

if(keyIsPressed && keycode == somenumber){
doSomething();
}
person verymessi    schedule 24.07.2013
comment
это единственный реальный легкий ответ - person tetris11; 18.03.2015

arrow_upward
0
arrow_downward

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

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

person Yamiko    schedule 13.05.2013

arrow_upward
0
arrow_downward

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

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

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

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

У меня есть это в моем приложении и работает нормально.

person Wasp    schedule 29.07.2013

arrow_upward
0
arrow_downward

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

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
});
person kofifus    schedule 11.04.2014

arrow_upward
-2
arrow_downward

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

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

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

person devnull69    schedule 05.09.2012
comment
В простом Html5-приложении ваш ответ правильный. Но в Canvas, управляемом kineticjs, это тоже не сработает. - person itinance; 10.09.2012