property - Javascript zoom y rotar usando gesturecambiar y gestar

title property html

Question

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

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

¿Hay alguna manera de hacer que esto sea suave y evitar que salte de los dedos, o el enfoque que tomé es incorrecto? En necesidad de algunos consejos y trucos y ayuda

encontró una solución

Parece que el evento my touch para el arrastre interfirió con los gestos, por eso siguió saltando de un dedo a otro, la forma de evitarlo es utilizar gestos, en lugar de ello, contar los toques en el objeto y usar el inicio, el final y el cambio.

Aquí está 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

Su solución funciona, pero no es la más elegante: aún puede usar su primer fragmento de código y confiar en los eventos de gesture .
Todo lo que tiene que hacer es asegurarse de que los controladores de eventos touch no interfieran con sus gesture gestuales.
Solo agrega esto en los controladores de eventos touch :

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

y luego use su código de gesto existente:

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

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

Answer 2

Tal vez jquery no es el mejor para esta tarea. Podrías pensar en usar sencha touch . Ya hace lo que querías muy bien. Echa un vistazo a las demos . Dependiendo de lo que quieras hacer, jQuery Mobile también sería una buena opción.