터치 그리기 이벤트 및 HTML5 캔버스

마우스 및 모바일 (iOS/Android)에서 '그리기'할 수있는 캔버스 요소를 작성하려고합니다. 컴퓨터와터치 그리기 이벤트 및 HTML5 캔버스

 
// Mouse based interface 
    $(drawing.canvas).bind('mousedown', drawing.drawStart); 
    $(drawing.canvas).bind('mousemove', drawing.draw); 
    $(drawing.canvas).bind('mouseup', drawing.drawEnd); 
    $('body').bind('mouseup', drawing.drawEnd); 

    $(drawing.canvas).bind('touchstart', drawing.drawStart); 
    $(drawing.canvas).bind('touchmove', drawing.draw); 
    $(drawing.canvas).bind('touchend', drawing.drawEnd);

작품 (PC, 맥)하지만 이동하지 (아이폰 OS/안드로이드) :

여기 내 바인드 코드입니다. 또한 touch* 이벤트에 대해서는 addEventListener을 시도했지만 기쁨은 없습니다.

아이디어가 있으십니까?

출처

2011-05-03 cbrulak

그래서 당신은'canvas.addEventListener ('touchstart'을 시도했다 (터치가 작동하는지 확인하기 위해 큰 검은 사각형을 페인트) onTouchStart, false); '? 지금 당장은 jQuery를 완전히 무시하고 그냥 작동 시키십시오. –

검은 직사각형 코드가 추가되었지만 선 등을 그리는 데는 효과가 없었습니다. 그래서 그것이 작동하지 않는 드로잉 함수인지 궁금합니다. – cbrulak

문제의 원인이 될 가능성이 가장 높습니다. 작업중인 버전을 얻을 때까지 코드에서 것들을 깎아 내고 거기에서 다시 작업하십시오. –

sytax 오류 또는 jQuery 문제입니다. 안드로이드에 대한 canvas.addEventListener('touchstart', onTouchStart, false); 작품 잘 아래로 증류 :

http://jsfiddle.net/tQW2L/

이

출처

2011-05-03 14:10:43

터치 그리기 이벤트 및 HTML5 캔버스

답변

관련 문제