Distance entre deux points pour lancer des valeurs négatives

Question

Im en utilisant la formule pour calculer la distance entre deux points afin de déterminer combien tourner une image lorsque je déplace ma souris sur elle.

1. clic, je capture au point où je clique
2. souris se déplace en faisant glisser, j'enregistre l'emplacement du point où ma souris a déménagé à
3. je calcule la distance entre origine et la fin
4. I faire pivoter l'image en utilisant cette valeur qui commence à 1.

alors dis-je LETs clique sur le centre de l'image, je commence à glisser ma souris vers la droite, mon image tourne parfaitement, puis sans lâcher le clic i traîne retour de la souris sur mon image, mon image est maintenant en contre-rotation, ce qui est parfait. Maintenant, une fois que la souris atteint ce centre (où j'ai cliqué initialement), elle force mon image à tourner dans les directions opposées car la distance atteint sa limite (0) et les nouvelles valeurs sont toutes positives même si je bouge vers la gauche. Je comprends que la distance entre deux points est supposée être positive mais j'ai besoin de quelque chose de négatif quand je reviens à (0) pour que je puisse tourner correctement mon image.

Answer 1

http://jsfiddle.net/wRexz/4/

var dragging = false, startpoint, endpoint, midpoint = $("#center").position(); 
midpoint = {x:midpoint.left - 2, y:midpoint.top-2}; 

$("#stage").mousedown(function(e){ 
    dragging = true; 
    startpoint = {x:e.offsetX, y:e.offsetY}; 
}); 

$("#stage").mouseup(function(e){ 
    dragging = false; 
}); 

$("#stage").mousemove(function(e){ 
    if (dragging){ 
     var angle = 0, sp = startpoint, mp = midpoint; 
     var p = {x:e.offsetX, y:e.offsetY}; 
     var sAngle = Math.atan2((sp.y-mp.y),(sp.x - mp.x)); 
     var pAngle = Math.atan2((p.y-mp.y),(p.x - mp.x));   

     angle = (pAngle - sAngle) * 180/Math.PI; 

     $("#display").text(angle); 
     $('#rotateme').css({ rotate: '+=' + angle }); 

     startpoint = {x:p.x, y:p.y}; 
    } 
});​ 

Ce trouvera l'angle relatif de rotation entre deux points. Il se met à jour chaque fois que l'événement mousemove est déclenché, de sorte qu'il ne sera jamais plus de 180 degrés en une fois (sauf lorsque vous faites glisser autour du point central). Math.atan2 simplifie la logique par rapport à Math.atan car ce dernier n'est pas destiné à un système de coordonnées.

Answer 2

Le moyen le plus rapide serait d'utiliser une simple instruction if.

if (x2 < x1) 
    dist = -dist; 

Vous devez vous demander si vous voulez tourner autour de l'axe Y seulement, comme je suppose que de ce que vous écrivez, ou autour de l'axe X aussi, dans ce cas, que la direction de rotation sera régie par le fait que (y2 < y1) (composition de deux rotations).