javascript + html5 canvas : 휴대 기기에서 드래그/스크롤하는 대신 그림으로 그립니까?

나는 웹 페이지에 간단한 그리기 패드를 만들기 위해 html5 캔버스 + 일부 자바 스크립트 (onmousedown/move/up)를 사용하고 있습니다.javascript + html5 canvas : 휴대 기기에서 드래그/스크롤하는 대신 그림으로 그립니까?

Opera, Firefox, Chrome 등에서 정상적으로 작동합니다 (데스크톱 PC에서 실행). 하지만이 페이지를 iPhone으로 방문하면 캔버스에 그릴 때 페이지가 드래그되거나 스크롤됩니다.

다른 페이지 콘텐츠에서는 괜찮습니다. 페이지를 아래로 밀어 올려 평상시처럼 모바일 브라우저에서 페이지를 탐색 할 수 있습니다. 하지만 모바일 방문자가 실제로 무언가를 그릴 수 있도록 캔버스에서이 동작을 비활성화하는 방법이 있습니까?

<html><head><script type='text/javascript'> 
function init() 
{ 
    var canvas = document.getElementById('MyCanvas'); 
    var ctx = canvas.getContext('2d'); 
    var x = null; 
    var y; 
    canvas.onmousedown = function(e) 
    { 
    x = e.pageX - canvas.offsetLeft; 
    y = e.pageY - canvas.offsetTop; 
    ctx.beginPath(); 
    ctx.moveTo(x,y); 
    } 
    canvas.onmouseup = function(e) 
    { 
    x = null; 
    } 
    canvas.onmousemove = function(e) 
    { 
    if (x==null) return; 
    x = e.pageX - canvas.offsetLeft; 
    y = e.pageY - canvas.offsetLeft; 
    ctx.lineTo(x,y); 
    ctx.stroke(); 
    } 
} 
</script></head><body onload='init()'> 
<canvas id='MyCanvas' width='500' height='500' style='border:1px solid #777'> 
</canvas></body></html>

나는 캔버스에 추가해야 할 특별한 스타일이나 이벤트가 캔버스에 보내 주시면 때 페이지 스크롤/드래그 방지하기 위해, 거기 : 참고로

는 여기 minimalisic 예입니까?

출처

2012-04-02 Sheldon Pinkman

iPad/iPhone에는 마우스 * 이벤트가 없습니다. touchstart, touchmove 및 touchend을 사용해야합니다. 그것은 터치 시작 방법에 return false에게 중요한

canvas.ontouchstart = function(e) { 
    if (e.touches) e = e.touches[0]; 
    return false; 
}

그렇지 않으면 페이지 스크롤이 트리거되어 있기 때문에 :이 같은 첫 번째를 얻을 필요가 있으므로이 이벤트는 다수의 접촉을 가질 수 있습니다.

출처

2012-04-02 11:57:22 Grassator

아, 맞아. 전에는 눈치 채지 못했습니다. 감사! –

안드로이드에서 이것은 작동하지 않지만 스펙에 따라'e.preventDefault();'를 사용할 수 있습니다 http://www.w3.org/TR/touch-events/#the-touchstart------ ---행사 – lapo

javascript + html5 canvas : 휴대 기기에서 드래그/스크롤하는 대신 그림으로 그립니까?

답변

관련 문제