Javascript zoom y rotar usando gesturechange y gestureend

Question

Estoy trabajando en algunos eventos táctiles y gestos, quiero poder hacer zoom y rotar el objeto, lo he logrado arrastrar con éxito pero los gestos me están causando problemas. Los gestos funcionan pero están entrecortados, cada vez que lo pellizcas para acercar o alejar la imagen o intentas rotarla, salta de dedo a dedo.

Aquí está mi código de referencia.

var width = 300; var height = 300; var rotation = 0; 
$('.dynamic').live("gesturechange gestureend", function(e){ 
var orig = e.originalEvent; 

if(e.type == 'gesturechange'){ 
    e.preventDefault(); 
    $(this).css("width", parseFloat(width) * orig.scale); 
    $(this).css("height", parseFloat(height) * orig.scale); 
    $(this).css("-webkit-transform","rotate(" + ((parseFloat(rotation) + orig.rotation) % 360) + "deg)"); 
}else if(e.type == 'gestureend'){ 
    a.w[ids] = parseFloat(width) * orig.scale; 
    a.h[ids] = parseFloat(height) * orig.scale; 
    a.rotation[ids] = (parseFloat(rotation) + orig.rotation) % 360; 
} 
}); 

¿Existe de todos modos para hacer esto sin problemas, y evitar que se salta de los dedos, o es el enfoque que tomé mal. En la necesidad de algunos consejos y trucos y ayudar

encontrado una solución

parece que el mi evento táctil para arrastrar interferido con los gestos que por eso se mantuvo saltando de un dedo a otro, la forma de evitar esto era no utilizar en su lugar, los gestos cuentan los toques en el objeto y usan el inicio, el final y el cambio táctiles.

Este es el código

var touches = 0; var width = 300; var height = 300; var rotation = 0; 
$('.dynamic').live("touchstart touchmove touchend", function(e){ 
var orig = e.originalEvent; 

if(e.type == 'touchstart'){ 
if(orig.touches.length == 1){ 
    touches = 1; 
}else if(orig.touches.length == 2){ 
    touches = 2; 
} 
}else if(e.type == 'touchmove'){ 
e.preventDefault(); 
if(touches == 2){ 
     $(this).css("width", parseFloat(width) * orig.scale); 
     $(this).css("height", parseFloat(height) * orig.scale); 
     $(this).css("-webkit-transform","rotate(" + ((parseFloat(rotation) + orig.rotation) % 360) + "deg)"); 
} 
}else if(e.type == 'touchend'){ 
    if(touches == 2){ 
     a.w[ids] = parseFloat(width) * orig.scale; 
     a.h[ids] = parseFloat(height) * orig.scale; 
     a.rotation[ids] = (parseFloat(rotation) + orig.rotation) % 360; 
    } 
} 
}); 

Answer 1

funciona su solución, pero no es el más elegante: puede seguir utilizando su primera pieza de código y se basan en las gesture eventos.
Todo lo que tiene que hacer es asegurarse de que los controladores de eventos touch no interfieran con sus gesture.
Sólo tiene que añadir esto en los manipuladores touch eventos:

$('.dynamic').live("touchstart touchmove touchend", function(e){ 
    if(e.originalEvent.touches.length > 1) 
     return; 
    /* your touch code here */ 
}); 

y luego usar su código gesto existente:

$('.dynamic').live("gesturechange gestureend", function(e){ 
    /* your gesture code here */ 
}); 

Esto debería funcionar debido a que los eventos de gestos se activan sólo allí estén tocando dos o más dedos la pantalla, y ningún otro código se ejecuta cuando esto sucede, porque los controladores de eventos táctiles responden solo con un toque.

Answer 2

Quizás jquery no sea el mejor para esta tarea. Puede pensar en usar sencha touch. Ya hace lo que querías muy bien. Eche un vistazo al demos. Dependiendo de lo que quieras hacer, jQuery Mobile también sería una buena opción.