Obliczanie kąta w stopniach ruchu myszy

Question

Chcę obliczyć kąt ruchu myszy w stopniach. Chociaż wiem, że nie musisz poruszać myszą w linii prostej, po prostu próbowałem obliczyć ją na podstawie punktów początkowych i końcowych, aby stworzyć ładny kąt prosty.

log("ANGLE: " + getAngle(x1, y1, x2, y2)); daje dziwne wyniki:

ANGLE: 0.24035975832980774 
mouse has stopped 
ANGLE: 1.334887709726425 
mouse has stopped 
ANGLE: 0.2722859857950508 
mouse has stopped 
ANGLE: 0.3715485780567732 
mouse has stopped 

Kod:

 $("canvas").mousemove(function(e) {     
      getDirection(e); 
      if (!set) { 
       x1 = e.pageX, //set starting mouse x 
       y1 = e.pageY, //set starting mouse y 
       set = true; 
      } 
      clearTimeout(thread); 
      thread = setTimeout(callback.bind(this, e), 100); 
     }); 

     function getAngle (x1, y1, x2, y2) { 
      var distY = Math.abs(y2-y1); //opposite 
      var distX = Math.abs(x2-x1); //adjacent 
      var dist = Math.sqrt((distY*distY)+(distX*distX)); //hypotenuse, 
       //don't know if there is a built in JS function to do the square of a number 
      var val = distY/dist; 
      var aSine = Math.asin(val); 
      return aSine; //return angle in degrees 
     } 

     function callback(e) { 
      x2 = e.pageX; //new X 
      y2 = e.pageY; //new Y 

      log("ANGLE: " + getAngle(x1, y1, x2, y2)); 
      log("mouse has stopped"); 
      set = false; 
     } 

Answer 1

Twoje obliczenia wydają się być poprawne, ale problem polega na tym, że Math.asin (val) zwraca wartości w radianach. Użyj poniższej funkcji do przekonwertowania na stopnie:

Math.degrees = function(radians) 
{ 
    return radians*(180/Math.PI); 
} 

A następnie wywołaj Math.degrees (Math.asin (val)) i to powinno zadziałać!

Answer 2

Funkcja Math.asin() zwraca kąt w radianach. Jeśli pomnożysz przez 180/pi, otrzymasz odpowiedź w stopniach.

Dodatkowo, ponieważ potrzebujesz więcej niż 90 stopni, powinieneś upuścić połączenie Math.abs, abyś mógł mieć ujemną wartość dla ain.

Answer 3

Użyj funkcji ATAN2 uzyskać kąt w pełnym kole,

radians = Math.atan2(y2-y1,x2-x1); 

Dodatkowo, możesz zalogować wartości x1, x2, y1, y2 w momencie obliczania, byłoby lepiej mieć tylko jedno miejsce, w którym znajduje się pozycja myszy. W tej chwili aktualizujesz pozycję (x2, y2, t2) co 10ms, ale (x1, y1, t1) za każdym razem, gdy mysz jest przenoszona. Może to skutkować bardzo nieprzewidywalnymi kombinacjami próbek.