42 Stimmen

Kann die Koordinaten von Touchevents in Javascript auf Android-Geräten nicht abrufen

Ich teste die HTML5-Leinwand und verwende Javascript zum Zeichnen für touchfähige Geräte. Während ich es in iOS-Geräte arbeiten kann ich nicht bekommen, es auf Android zu arbeiten. Ich habe es auf event.pageX eingegrenzt, das die Koordinaten nicht zurückgibt, aber stattdessen entweder 0 oder undefiniert (basierend auf dem Browser) zurückgibt.

Ich habe es auf meinem Handy mit Cyanogen 7.1 in Opera Mobile und Dolphin Browser getestet, und auch auf einem Galaxy Tab 10.1 (Android 3.1) mit dem Standardbrowser.

Ich habe den Code so geändert, dass bei einem Touchstart-Ereignis eine Warnung mit den Koordinaten event.pageX, event.layerX und event.clientX angezeigt wird (ich bin mir bewusst, dass clientX nur unter iOS funktionieren sollte).

canvas.addEventListener('touchstart', function(e) {
if (readyToDraw){
    alert("PageX: "+e.pageX+","+e.pageY+"\n LayerX: "+e.layerX+","+e.layerY+"\n + clientX: "+e.clientX+","+e.clientY);
    // prevent the browsers default action!
    e.preventDefault();
    paint = true;
    // Get coordinates
    var c = getCoords(e);
    addClick(c.x, c.y, false);
}
});

Ich habe die vollständige Zeichnung in iOS arbeiten, aber kann nicht einmal Android bekommen, um die Koordinaten zu registrieren, irgendwelche Ideen?

FINAL EDIT: Ich habe das Problem gelöst, siehe die akzeptierte Antwort.

69voto

Stuart Lacy Punkte 1861

FINAL EDIT: Ok ich habe es funktioniert, wenn jemand dies findet und ein ähnliches Problem hat, müssen Sie das Touch-Array innerhalb des Ereignisses zugreifen, und wenn nur mit einer einzigen Berührung (anstatt Multi-Touch) nehmen Sie das erste Element aus dem Array, wie unten, oder Sie müssen möglicherweise es zu versetzen, wenn das nicht genau ist:

var touch = event.touches[0];
var x = touch.pageX;
var y = touch.pageY;
// or taking offset into consideration
var x_2 = touch.pageX - canvas.offsetLeft;
var y_2 = touch.pageY - canvas.offsetTop;

1voto

Bei mir hat es nicht funktioniert (im Zusammenhang mit iScroll 5). Verwendet changedTouches[0] stattdessen, wie vorgeschlagen in Mausklick-Ereignis.pagex ist NaN im mobilen Chrome-Browser (v30.0.1599.92) .

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X