KineticJS로 만든 HTML5 캔버스에서 키보드 입력을 받으려면 keydown 이벤트를 직접 바인딩해야 합니다. 다음은 그 구현 방법입니다.
1. 키 입력 감지하기
키다운 이벤트를 수신하는 가장 기본적인 방식은 조건문으로 특정 키의 눌림 여부를 확인하는 것입니다.
if(keyIsPressed && keycode == somenumber) {
doSomething();
}keyIsPressed는 키가 눌렸는지 나타내는 불리언 값이고, keycode에는 각 키에 고유하게 할당된 숫자 코드가 들어갑니다. 예를 들어 화살표 키나 스페이스바처럼 게임·인터랙티브 콘텐츠에서 자주 쓰이는 키를 특정해 동작을 실행할 수 있습니다.
2. 캔버스에 Keydown 이벤트 바인딩하기
여기서 중요한 점은 <canvas> 요소는 기본적으로 키보드 포커스를 받을 수 없다는 것입니다. 따라서 tabindex 속성을 부여해 포커스 가능한 요소로 만든 뒤, 포커스를 지정하고 keydown 이벤트를 연결해야 합니다.
// KineticJS 레이어에서 실제 DOM 캔버스 요소 가져오기
var canvas1 = layer.getCanvas()._canvas;
// 캔버스를 포커스 가능한 요소로 만들기
$(canvas1).attr('tabindex', 1);
canvas1.focus();
// keydown 이벤트 바인딩
$(canvas1).keydown(function (event) {
console.log(event);
});코드 설명
layer.getCanvas()._canvas: KineticJS의 레이어 객체에서 실제 DOM <canvas> 요소를 추출합니다. 내부 프로퍼티(_canvas)에 접근하는 방식이므로 라이브러리 버전에 따라 동작이 달라질 수 있습니다.attr('tabindex', 1): 캔버스에 tabindex를 설정해 키보드 포커스를 받을 수 있게 합니다.canvas1.focus(): 페이지 로드 후 즉시 캔버스에 포커스를 두어, 별도의 클릭 없이도 키 입력을 받을 수 있게 합니다.keydown(): jQuery로 keydown 이벤트를 바인딩하고, 발생한 이벤트 객체를 콘솔에 출력합니다.
참고 사항
사용자가 페이지의 다른 요소를 클릭하면 포커스가 캔버스에서 벗어나 키 입력이 작동하지 않을 수 있습니다. 이 경우 캔버스 영역 클릭 시 다시 focus()를 호출하거나, 문서 전체(document)에 keydown 이벤트를 바인딩하는 방법도 고려할 수 있습니다. 또한 최신 브라우저에서는 event.key(예: 'ArrowLeft', 'a')를 사용하는 것이 폐기 예정인 event.keyCode보다 권장됩니다.