2012-03-06 6 views
22

Estoy probando el lienzo de HTML5 y utilizando Javascript para dibujar para dispositivos habilitados para tocar. Mientras lo tengo trabajando en dispositivos iOS, no puedo hacerlo funcionar en Android. Lo he reducido a event.pageX no devolviendo las coordenadas, sino que devuelve 0 o undefined (basado en el navegador).No se pueden obtener coordenadas de touchevents en Javascript en dispositivos Android

Lo he probado en mi teléfono con Cyanogen 7.1 en Opera Mobile y el navegador Dolphin, y también en un Galaxy Tab 10.1 (Android 3.1) que ejecuta el navegador estándar.

He modificado el código para mostrar una alerta en un evento touchstart que muestra las coordenadas event.pageX, event.layerX y event.clientX (soy consciente de que clientX solo debería funcionar en 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); 
} 
}); 

Tengo el dibujo completo funcionando en iOS pero ni siquiera puedo conseguir que Android registre las coordenadas, ¿alguna idea?

EDICIÓN FINAL: He resuelto el problema, ver la respuesta aceptada.

+0

Ver [esto] (http://stackoverflow.com/questions/6099268/does-html5-support-touch-on-mobile-phones). Si todavía no puede hacer que funcione, creo que phoneGap funcionaría. – toto2

+0

¡Gracias, esto me ayudó mucho! –

+0

@Stu Nice está funcionando. ¿Podría hacer una respuesta de su edición por lo que esta pregunta sale de la pestaña de "preguntas sin respuesta". :) ¡Gracias! –

Respuesta

27

EDICIÓN FINAL: Ok, lo tengo funcionando, si alguien encuentra esto y tiene un problema similar, necesita acceder a la matriz táctil dentro del evento, y si solo usa un solo toque (en lugar de multitáctil) tome el primer elemento fuera de la matriz, como abajo, o tal vez necesite para compensarlo si eso no es exacto:

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; 
+0

mierda santa me estaba quitando el pelo. gracias – user151496

+1

Para usuarios de jQuery que terminan aquí, use 'event.originalEvent.touches [0]' en su lugar ... – Shikkediel

+0

Usted me salvó la vida. Traté de encontrar el error durante horas en una aplicación cordova. Finalmente puedo lanzarlo en todas las plataformas. – kaiserkiwi

Cuestiones relacionadas