Uzyskaj odległość między dwoma punktami na płótnie

100

Mam kartę do rysowania na płótnie i chcę, aby lineWidth była oparta na odległości między dwiema ostatnimi aktualizacjami współrzędnych myszy. Sam dokonam translacji odległości na szerokość, muszę tylko wiedzieć, jak obliczyć odległość między tymi punktami (mam już współrzędne tych punktów).

javascript canvas Anagmate
źródło

Odpowiedzi:

208

Możesz to zrobić za pomocą twierdzenia Pitagorasa

Jeśli masz dwa punkty (x1, y1) i (x2, y2), możesz obliczyć różnicę w x i różnicę w y, nazwijmy je a i b.

wprowadź opis obrazu tutaj

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

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

// c is the distance
Igor Šarčević
źródło
9
możesz skrócić var ​​c = Math.sqrt (a a + b b); to var c = Math.hypot (a, b);
evgpisarchik
2
a ^ 2 + b ^ 2 = c ^ 2 Równanie hipotenusa
Kad
Czy to jakaś różnica, jeśli pójdziesz, x1 - x2, y1 - y2czy x2 - x1, y2 - y1?
Ramzan Chasygov
1
@RamzanChasygov W tym przypadku nie ma różnicy, ponieważ każda wartość jest podniesiona do kwadratu! Więc czy kolejność była taka, 7 - 5 = 2czy 5 - 7 = -2nie ma znaczenia. -2 * -2 = 4 2 * 2 = 4
rdmurphy
166

Należy pamiętać, że Math.hypotjest to część standardu ES2015. Dokument MDN zawiera również dobre wypełnienie dla tej funkcji.

Uzyskanie dystansu staje się więc tak proste, jak Math.hypot(x2-x1, y2-y1).

David Gee
źródło
1

Odległość między dwiema współrzędnymi x i y! x1 i y1 to pierwszy punkt / pozycja, x2 i y2 to drugi punkt / pozycja!

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);
};
Rozwiń fragment

Daniel
źródło
Powinieneś użyć Math.abszamiast diff.
Moshe Simantov
3
Nie musisz tego używać, diffponieważ podniesienie liczby do kwadratu zawsze da w wyniku liczbę dodatnią. Jeśli x1 - y1jest ujemne, (x1 - y1) ^ 2nadal jest pozytywne.
Redwolf Programs
0

Zwykle często używam tego obliczenia w rzeczach, które tworzę, więc lubię dodawać je do obiektu 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

Aktualizacja:

to podejście jest szczególnie przyjemne, gdy znajdziesz się w sytuacjach podobnych do tego (często robię):

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

ta okropna rzecz staje się znacznie łatwiejsza do opanowania:

varName.dist=Math.dist((varName.paramX-varX)/2, (varName.paramY-varY)/2, cx, cy);
jaya
źródło