Holen Sie sich den Abstand zwischen zwei Punkten in der Leinwand

100

Ich habe eine Registerkarte zum Zeichnen von Zeichenflächen und möchte, dass die Linienbreite auf dem Abstand zwischen zwei letzten Aktualisierungen der Mausbewegungskoordinaten basiert. Ich werde den Abstand in die Breite selbst übersetzen. Ich muss nur wissen, wie ich den Abstand zwischen diesen Punkten erhalte (ich habe bereits Koordinaten dieser Punkte).

javascript canvas Anagmate
quelle

Antworten:

207

Sie können es mit dem Satz von Pythonagoras tun

Wenn Sie zwei Punkte (x1, y1) und (x2, y2) haben, können Sie die Differenz in x und die Differenz in y berechnen. Nennen wir sie a und b.

Geben Sie hier die Bildbeschreibung ein

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

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

// c is the distance
Igor Šarčević
quelle
9
Sie können var c = Math.sqrt (a a + b b) kürzen ; zu var c = Math.hypot (a, b);
evgpisarchik
2
a ^ 2 + b ^ 2 = c ^ 2 Hypotenus-Gleichung
Kad
Ist es ein Unterschied, ob du gehst x1 - x2, y1 - y2oder x2 - x1, y2 - y1?
Ramzan Chasygov
1
@ RamzanChasygov In diesem Fall gibt es keinen Unterschied, da jeder Wert quadratisch ist! Also, ob die Reihenfolge war 7 - 5 = 2oder 5 - 7 = -2nicht, spielt keine Rolle. -2 * -2 = 4 2 * 2 = 4
rdmurphy
166

Beachten Sie, dass dies Math.hypotTeil des ES2015-Standards ist. Es gibt auch eine gute Polyfüllung im MDN-Dokument für diese Funktion.

So wird die Entfernung so einfach wie Math.hypot(x2-x1, y2-y1).

David Gee
quelle
1

Der Abstand zwischen zwei Koordinaten x und y! x1 und y1 ist der erste Punkt / Position, x2 und y2 ist der zweite Punkt / Position!

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);
};
Erweitern Sie das Snippet

Daniel
quelle
Sie sollten Math.absanstelle von verwenden diff.
Moshe Simantov
3
Sie müssen nicht verwenden, diffda das Quadrieren einer Zahl immer zu einer positiven Zahl führt. Wenn x1 - y1negativ ist, (x1 - y1) ^ 2ist immer noch positiv.
Redwolf Programme
0

Ich neige dazu, diese Berechnung häufig in Dingen zu verwenden, die ich mache, deshalb füge ich sie gerne dem Math-Objekt hinzu:

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

Aktualisieren:

Dieser Ansatz ist besonders erfreulich, wenn Sie in ähnlichen Situationen landen (was ich oft tue):

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

das schreckliche Ding wird umso überschaubarer:

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