Определить расстояние между двумя точками на холсте

103

У меня есть вкладка для рисования холста, и я хочу, чтобы lineWidth основывалась на расстоянии между двумя последними обновлениями координат перемещения мыши. Я сам сделаю перевод расстояния в ширину, мне просто нужно знать, как получить расстояние между этими точками (у меня уже есть координаты этих точек).

javascript canvas Анагмат
источник

Ответы:

211

Вы можете сделать это с помощью теоремы Пифагора

Если у вас есть две точки (x1, y1) и (x2, y2), вы можете вычислить разницу в x и разницу в y, позвольте называть их a и b.

введите описание изображения здесь

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

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

// c is the distance
Игорь Шарчевич
источник
11
вы можете сократить var c = Math.sqrt (a a + b b); to var c = Math.hypot (a, b);
евгписарчик
2
a ^ 2 + b ^ 2 = c ^ 2 Уравнение гипотена
Кад
Есть ли разница, если ты пойдешь x1 - x2, y1 - y2или x2 - x1, y2 - y1?
Рамзан Часыгов
1
@RamzanChasygov В этом случае нет разницы, потому что каждое значение возведено в квадрат! Так что был ли порядок такой 7 - 5 = 2или 5 - 7 = -2неважно. -2 * -2 = 4 2 * 2 = 4
rdmurphy
167

Обратите внимание, что Math.hypotэто часть стандарта ES2015. Для этой функции в документе MDN также есть хороший полифил .

Так что преодолеть расстояние становится проще простого Math.hypot(x2-x1, y2-y1).

Дэвид Джи
источник
1

Расстояние между двумя координатами x и y! x1 и y1 - первая точка / позиция, x2 и y2 - вторая точка / позиция!

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);
};
Развернуть фрагмент

Даниэль
источник
Вы должны использовать Math.absвместо diff.
Моше Симантов
3
Вам не нужно использовать diffквадрат, так как всегда будет положительное число. Если x1 - y1отрицательно, то (x1 - y1) ^ 2еще положительно.
Redwolf Programs
0

Я часто использую этот расчет в своих делах, поэтому мне нравится добавлять его в объект 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

Обновить:

этот подход особенно хорош, когда вы попадаете в ситуации, похожие на это (я часто так и поступаю):

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

эта ужасная вещь становится гораздо более управляемой:

varName.dist=Math.dist((varName.paramX-varX)/2, (varName.paramY-varY)/2, cx, cy);
Джая
источник