2012-09-05 4 views
11

Kineticjs에 의해 관리되는 Htm5-Canvas에 이벤트 리스너를 추가하려고합니다 (Canvas는 KineticJS의 스테이지를 통해 생성되었습니다).KineticJS 관리 HTML5- 캔버스에서 Keydown-Events를 수신하는 방법?

$ (선택) .keydown (기능 (전자) {...}) 다음 선택기와

:

  • 나는 (jQuery를 사용하여) 밖으로 시도 창문 (은 작동 중임, 전체 창문을 듣고있어 좋지 않음)

  • 전체 캔버스 요소 $ ('캔버스') < - 작동하지
  • KineticJS과 캔버스 < 포함 된 컨테이너 -
  • 작동하지 않음을 $ ('. kineticjs 콘텐츠'와 (운동에 의해 생성) KineticJS의 컨테이너 사업부) .keydown (함수() {...}) <-

만 $ (창)가 작동 중이면 작동하지 않습니다. 알아 낸 일반 Html5-Canvas로 실험 한 후에 Canvas-Element에는 키보드 이벤트에 대한 지원 기능이 내장되어 있습니다. KineticJS는 여기에서 마술을하고 있습니다. 잘못된 선택기 - 사용을 제외 할 수 있습니다. 을 console.log ($ (선택) .length)

사람이 여기 도와 드릴까요 :

나는 모든이 코드 선택기를 확인? 미리 Thx!

+0

당신이 지금 귀하의 질문에 대한 해결책을 찾았나요? – Kaffee

+0

나는 두려워하지 않는다. – itinance

답변

-2

키보드 이벤트를 받기 전에 캔버스 요소에 포커스가 있는지 확인해야합니다. Unfotunately .focus() 메소드는 파이어 폭스에서 나를 위해 작동하지 않았다, 그래서 나는

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

캔버스를 클릭하고 초점을해야합니다이 봐라을 시도했다.

+0

평범한 Html5 응용 프로그램에서 당신의 대답은 옳습니다. 그러나 kineticjs가 관리하는 Canvas에서는 작동하지 않습니다. – itinance

0

현재로 On은 마우스 및 터치 이벤트 만 지원합니다.

각 레이어에는 이벤트를 잡고 첨부 할 수있는 고유 한 canvas이 있습니다. 당신이 그것을에 자바 스크립트를 포함 할 경우

1

는, 여기에 코드입니다 :이 (2 일)와 함께이 제한된 경험에서

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

이것이 유일한 실제 가벼운 답변입니다. – tetris11

0

, 나는 당신이 추가 한 각 층 그래서 만약, 캔버스 될 것을 보았다 당신이 변수 (예 : topmostLayer)의 최상위 계층에 대한 참조를 가지고, 당신은 장소에두고

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

을 할 수있는, 어떤 @devnull69 제안 만 작동합니다

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

제 신청서에 제자리에 있으며 잘 작동합니다.내가 거기에 키보드 플러그인 중 하나를 사용하는 것이 좋습니다

0

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 
}); 
관련 문제