javascript + html5 canvas: disegno anziché trascinamento/scorrimento su dispositivi mobili?

Sto usando una tela HTML5 + alcuni javascript (onmousedown/move/up) per creare un semplice draw pad su una pagina web.javascript + html5 canvas: disegno anziché trascinamento/scorrimento su dispositivi mobili?

OK in Opera, Firefox, Chrome, ecc. (Provato su PC desktop). Ma se visito questa pagina con un iPhone, quando cerco di disegnare sulla tela, invece trascina o scorre la pagina.

Questo va bene per altri contenuti della pagina, facendo scorrere la pagina verso l'alto e verso il basso è possibile navigare attraverso la pagina in un browser mobile come al solito. Ma c'è un modo per disabilitare questo comportamento sulla tela, in modo che anche i visitatori mobili possano effettivamente disegnare qualcosa su di esso?

Per riferimento, ecco un esempio minimalisic:

<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>

C'è un certo stile o un evento speciale devo aggiungere alla tela, al fine di evitare di trascinare/scorrendo la pagina quando strisciata nella tela?

fonte

2012-04-02 Sheldon Pinkman

iPad/iPhone non ha mouse * eventi. È necessario utilizzare touchstart, touchmove e touchend. Questi eventi possono avere più tocchi quindi è necessario ottenere prima uno come questo:

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

E 'importante return false nel metodo start contatto perché altrimenti pagina di scorrimento viene attivato.

fonte

2012-04-02 11:57:22 Grassator

Ah, ha senso. Mai notato questi prima. Grazie! –

Su Android questo non funziona, ma puoi usare 'e.preventDefault();' come da specifiche http://www.w3.org/TR/touch-events/#the-touchstart-- ---evento – lapo

javascript + html5 canvas: disegno anziché trascinamento/scorrimento su dispositivi mobili?

risposta

Problemi correlati