javascript + html5 Leinwand: Zeichnen statt Ziehen/Scrollen auf mobilen Geräten?

Ich benutze ein html5 Canvas + etwas Javascript (onmousedown/move/up) um ein einfaches Zeichenfeld auf einer Webseite zu erstellen.javascript + html5 Leinwand: Zeichnen statt Ziehen/Scrollen auf mobilen Geräten?

Funktioniert OK in Opera, Firefox, Chrome, etc (versucht auf Desktop-PCs). Aber wenn ich diese Seite mit einem iPhone besuche, wenn ich versuche, auf der Leinwand zu zeichnen, zieht es stattdessen die Seite durch oder scrollt sie.

Dies ist für andere Seiteninhalte geeignet, indem Sie die Seite nach oben und unten bewegen, um wie gewohnt in einem mobilen Browser durch die Seite zu navigieren. Aber gibt es eine Möglichkeit, dieses Verhalten auf der Leinwand zu deaktivieren, damit auch mobile Besucher etwas darauf zeichnen können?

Für Ihre Referenz, hier ist ein minimalisic Beispiel:

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

Gibt es eine spezielle Art oder eine Veranstaltung, die ich auf die Leinwand hinzufügen muß, um die Seite zu vermeiden Ziehen/Scrollen, wenn in der Leinwand klauen?

Quelle

2012-04-02 Sheldon Pinkman

iPad/iPhone hat keine Maus * -Ereignisse. Sie müssen touchstart, touchmove und touchend verwenden. Diese Ereignisse können mehrere Berührungen, so dass Sie zunächst ein wie diese müssen bekommen:

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

Es ist wichtig zu return false Methode Touch Start, da sonst Seite blättern ausgelöst wird.

Quelle

2012-04-02 11:57:22 Grassator

Ah, macht Sinn. Hab ich nie zuvor bemerkt. Vielen Dank! –

Auf Android funktioniert das nicht, aber Sie können 'e.preventDefault();' gemäß Spezifikationen verwenden http://www.w3.org/TR/touch-events/#the-touchstart------ ---Veranstaltung – lapo

javascript + html5 Leinwand: Zeichnen statt Ziehen/Scrollen auf mobilen Geräten?

Antwort

Verwandte Themen