javascript + html5 tuval: mobil cihazlarda sürükleme/kaydırma yerine çizim yapmak?

Bir web sayfasında basit çizim pedi oluşturmak için bir html5 tuval + bazı javascript (onmousedown/move/up) kullanıyorum.javascript + html5 tuval: mobil cihazlarda sürükleme/kaydırma yerine çizim yapmak?

Çalışmaları Opera, Firefox, Chrome vb. (Masaüstü bilgisayarlarda denendi) sorun yok. Ancak bu sayfayı bir iPhone ile ziyaret edersem, tuvali çizmeye çalışırken, sayfayı sürükler veya kaydırır.

Bu her zamanki gibi bir mobil tarayıcıda sayfa gezinebilirsiniz bir aşağı sayfasını kaydırarak, diğer sayfa içeriği için gayet iyi. Ancak bu davranışı tuvalde devre dışı bırakmanın bir yolu var, bu sayede mobil ziyaretçiler de aslında bir şeyler üzerinde çizim yapabilirler mi?

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

Ben tuvale eklemek zorunda bazı özel stil veya olay tuvalinde kaydırarak zaman sayfasını kaydırma/sürükleyerek önlemek için, var mı: Başvuru için

, burada bir minimalisic örnek?

kaynak

2012-04-02 Sheldon Pinkman

iPad/iPhone fare * etkinlik içermiyor. Sen touchstart, touchmove ve touchend kullanmak gerekir. Bu dokunmatik başlangıç yönteminde return false önemlidir

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

aksi sayfa kaydırma tetiklenir çünkü: Eğer böyle ilkini almak gerekir böylece bu olaylar birden dokunuşlar sahip olabilir.

kaynak

2012-04-02 11:57:22 Grassator

Ah mantıklı. Bunları daha önce hiç fark etmedim. Teşekkürler! Android'de –

Bu işe yaramazsa, ancak 'e.preventDefault() kullanabilirsiniz;' http://www.w3.org/TR/touch-events/#the-touchstart------ görüşler uyarınca ---Etkinlik – lapo

javascript + html5 tuval: mobil cihazlarda sürükleme/kaydırma yerine çizim yapmak?

cevap

İlgili konular