web-dev-qa-db-fra.com

Impossible d'obtenir les coordonnées de touchevents en Javascript sur les appareils Android

Je teste le canevas HTML5 et utilise le langage Javascript pour dessiner sur des appareils tactiles. Bien que je l'utilise sur des appareils iOS, je ne parviens pas à le faire fonctionner sur Android. Je l'ai réduit à event.pageX ne renvoyant pas les coordonnées, mais renvoyant soit 0, soit undefined (basé sur le navigateur).

Je l'ai testé sur mon téléphone équipé de Cyanogen 7.1 dans les navigateurs Opera Mobile et Dolphin, ainsi que sur un Galaxy Tab 10.1 (Android 3.1) équipé du navigateur standard.

J'ai modifié le code pour afficher une alerte sur un événement touchstart affichant les coordonnées event.pageX, event.layerX et event.clientX (je suis conscient que clientX ne devrait fonctionner que sur iOS).

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);
}
});

Le dessin complet fonctionne sous iOS, mais je ne peux même pas qu'Android enregistre les coordonnées, des idées?

FINAL EDIT: J'ai résolu le problème, voir la réponse acceptée.

javascriptandroidontouchevent
27
Stuart Lacy

FINAL EDIT: Ok Je l’ai fait fonctionner. Si quelqu'un le découvre et a un problème similaire, vous devez accéder au tableau tactile au cours de l’événement, et si vous utilisez simplement une seule touche (plutôt que multi-touche) premier élément du tableau, comme ci-dessous, ou vous devrez peut-être le décaler si cela n’est pas exact:

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;
36
Stuart Lacy

Cela n'a pas fonctionné pour moi (dans le contexte iScroll 5). Utilisez changedTouches[0] à la place, comme proposé dans un clic de souris. Event.pagex est NaN dans le navigateur mobile Chrome (v30.0.1599.92) .

0
Sebastiaan Ordelman