Ottieni la distanza tra due punti nella tela

100

Ho una scheda di disegno su tela e voglio che la larghezza della linea sia basata sulla distanza tra gli ultimi due aggiornamenti delle coordinate di rimozione del mouse. Farò la traduzione della distanza in larghezza da solo, ho solo bisogno di sapere come ottenere la distanza tra quei punti (ho già le coordinate di quei punti).

javascript canvas

— Anagmate
fonte

208

Puoi farlo con il teorema di Pitagora

Se hai due punti (x1, y1) e (x2, y2), puoi calcolare la differenza in xe la differenza in y, chiamiamoli a e b.

inserisci qui la descrizione dell'immagine

var a = x1 - x2;
var b = y1 - y2;

var c = Math.sqrt( a*a + b*b );

// c is the distance

— Igor Šarčević
fonte

9

puoi accorciare var c = Math.sqrt (a a + b b); a var c = Math.hypot (a, b);

— evgpisarchik

2

a ^ 2 + b ^ 2 = c ^ 2 Equazione dell'ipoteno

— Kad

C'è differenza se vai x1 - x2, y1 - y2o x2 - x1, y2 - y1?

— Ramzan Chasygov,

1

@RamzanChasygov Non c'è differenza in questo caso perché ogni valore è al quadrato! Quindi se l'ordine era come 7 - 5 = 2o 5 - 7 = -2non importa. -2 * -2 = 4 2 * 2 = 4

— rdmurphy

166

Nota che Math.hypotfa parte dello standard ES2015. C'è anche un buon polyfill nel documento MDN per questa funzione.

Quindi ottenere la distanza diventa facile come Math.hypot(x2-x1, y2-y1).

— David Gee
fonte

26

http://en.wikipedia.org/wiki/Euclidean_distance

Se hai le coordinate, usa la formula per calcolare la distanza:

var dist = Math.sqrt( Math.pow((x1-x2), 2) + Math.pow((y1-y2), 2) );

Se la tua piattaforma supporta l' **operatore , puoi invece usarlo:

const dist = Math.sqrt((x1 - x2) ** 2 + (y1 - y2) ** 2);

— ekstrakt
fonte

1

La distanza tra due coordinate x e y! x1 e y1 è il primo punto / posizione, x2 e y2 è il secondo punto / posizione!

function diff (num1, num2) {
  if (num1 > num2) {
    return (num1 - num2);
  } else {
    return (num2 - num1);
  }
};

function dist (x1, y1, x2, y2) {
  var deltaX = diff(x1, x2);
  var deltaY = diff(y1, y2);
  var dist = Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2));
  return (dist);
};

Espandi lo snippet

— Daniel
fonte

Dovresti usare Math.absinvece di diff.

— Moshe Simantov

3

Non è necessario utilizzarlo diffpoiché quadrare un numero risulterà sempre in un numero positivo. Se x1 - y1è negativo, (x1 - y1) ^ 2è ancora positivo.

— Programmi Redwolf

0

tendo a usare molto questo calcolo nelle cose che faccio, quindi mi piace aggiungerlo all'oggetto Math:

Math.dist=function(x1,y1,x2,y2){ 
  if(!x2) x2=0; 
  if(!y2) y2=0;
  return Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1)); 
}
Math.dist(0,0, 3,4); //the output will be 5
Math.dist(1,1, 4,5); //the output will be 5
Math.dist(3,4); //the output will be 5

Aggiornare:

questo approccio è particolarmente felice quando ti ritrovi in situazioni qualcosa di simile a questo (lo faccio spesso):

varName.dist=Math.sqrt( ( (varName.paramX-varX)/2-cx )*( (varName.paramX-varX)/2-cx ) + ( (varName.paramY-varY)/2-cy )*( (varName.paramY-varY)/2-cy ) );

quella cosa orribile diventa molto più gestibile:

varName.dist=Math.dist((varName.paramX-varX)/2, (varName.paramY-varY)/2, cx, cy);

— jaya
fonte