Javascript zoom et rotation en utilisant gesturechange et gestureend

Question

Je travaille sur des événements tactiles et des gestes, je veux pouvoir zoomer et faire pivoter l'objet, j'ai réussi à le faire glisser mais les gestes me posent problème. Les gestes fonctionnent mais ils sont saccadés, chaque fois que vous le pincez pour zoomer ou dézoomer ou essayez de le faire pivoter, il saute d'un doigt à l'autre.

Voici mon code pour référence.

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

Y at-il de toute façon à faire de cette douceur, et l'empêcher de sauter des doigts, ou est l'approche que j'ai tort. Besoin de quelques conseils et astuces et aider

trouvé une solution

On dirait que le mon événement tactile pour glisser interféré avec les gestes thats pourquoi il sautait du doigt à doigt, comme cela était de ne pas utiliser les gestes comptent plutôt les touches sur l'objet et utilisent le toucher, la fin et la modification à la place.

Voici le code

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

fonctionne votre solution, mais ce n'est pas le plus élégant: vous pouvez toujours utiliser votre premier morceau de code et de compter sur les événements gesture.
Tout ce que vous avez à faire est de vous assurer que les gestionnaires d'événements touch n'interfèrent pas avec vos gesture.
Il suffit d'ajouter ceci dans les gestionnaires d'événements touch:

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

puis utilisez votre code de geste existant:

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

Cela devrait fonctionner parce que les événements de mouvement sont déclenchées seulement il y a deux ou plusieurs doigts de toucher l'écran, et aucun autre code ne s'exécute lorsque cela se produit, car les gestionnaires d'événements tactiles ne répondent qu'à une seule touche.

Answer 2

Peut-être que jquery n'est pas le meilleur pour cette tâche. Vous pourriez penser à utiliser sencha touch. Il fait déjà ce que tu voulais très bien. Jetez un oeil à la demos. En fonction de ce que vous voulez faire jQuery Mobile serait également un bon choix.