Calcolo dell'angolo in gradi del movimento del mouse

Question

Voglio calcolare l'angolo del movimento del mouse in gradi. Mentre so che non è necessario spostare il mouse in linea retta, stavo solo cercando di calcolarlo in base ai punti di partenza e di arrivo per creare un angolo retto.

log("ANGLE: " + getAngle(x1, y1, x2, y2)); sta dando risultati strani:

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

Codice:

 $("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

I tuoi calcoli sembrano essere corretti, ma il problema è che Math.asin (val) restituisce valori in radianti. Utilizzare la seguente funzione per convertire in gradi:

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

e quindi chiamare Math.degrees (Math.asin (val)) e che dovrebbe funzionare!

Answer 2

La funzione Math.asin() restituisce l'angolo in radianti. Se moltiplichi per 180/pi, otterrai la risposta in gradi.

Inoltre, poiché si desidera più di 90 gradi, è necessario eliminare la chiamata Math.abs in modo da poter avere un valore negativo per aSin.

Answer 3

Utilizzare la funzione atan2 per ottenere un angolo nel cerchio completo,

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

Inoltre, si consiglia di registrare i valori di x1, x2, Y1, Y2 al momento della computazione, sarebbe meglio avere solo un posto dove viene tracciata la posizione del mouse. Al momento, aggiorni la posizione (x2, y2, t2) ogni 10 ms, ma (x1, y1, t1) ogni volta che il mouse viene spostato. Ciò può provocare combinazioni di campioni molto imprevedibili.