2014-07-10 3 views
9

직물 응용 프로그램에서 현재 삭제 키와 같은 특정 키 누름을 듣고 선택한 요소를 삭제하고 있습니다. 키 입력을 수신 나의 방법은 다음과 같습니다fabric.js canvas가 키보드 이벤트를 수신합니까?

document.onkeydown = function(e) { 
    if (46 === e.keyCode) { 
    // 46 is Delete key 
    // do stuff to delete selected elements 
} 

그래도 난 문제로 실행 해요 : 나는 페이지의 텍스트 상자와 같은 다른 요소를 가지고 있고, 텍스트 상자에 입력 할 때, 나는 원하지 않는다 모든 요소를 ​​삭제하려면 키를 삭제하십시오.

canvas.tabIndex = 1000; 

당신이 키보드 이벤트와 canvas.addEventListener을 사용할 수 있습니다 :

this question에서, HTML5 캔버스에 이벤트 리스너를 부착 설명하는 방법이있다.

직물의 캔버스와 비슷한 것을 사용할 수 있습니까? 나는이 같은 그것을 시도

,
var CANVAS = new fabric.Canvas('elemID', {selection: false}) 
CANVAS.tabIndex = 1000; 
CANVAS.addEventListener("keydown", myfunc, false); 

내가 얻을 : 크롬에서 "catch되지 않는 형식 오류 정의되지는 함수가 아닙니다."

답변

12

다음과 같은 결과를 얻었습니다. 패브릭에서 사용하는 캔버스 주변에 래퍼 div가 있는데이 래퍼에 이벤트 수신기를 추가했습니다.

var canvasWrapper = document.getElementById('canvasWrap'); 
canvasWrapper.tabIndex = 1000; 
canvasWrapper.addEventListener("keydown", myfunc, false); 

이것은 정확히 원하는대로 작동합니다. 텍스트 상자 내부에서 발생하는 프레스는 청취자에 의해 선택되지 않습니다.

관련 문제