Отримайте відстань між двома точками на полотні

100

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

javascript canvas

— Анагмат
джерело

208

Це можна зробити за допомогою теореми піфагора

Якщо у вас є дві точки (x1, y1) і (x2, y2), ви можете обчислити різницю в x та різницю у, давайте назвемо їх a і b.

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

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

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

// c is the distance

— Ігор Шарчевич
джерело

9

ви можете скоротити var c = Math.sqrt (a a + b b); to var c = Math.hypot (a, b);

— evgpisarchik

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

166

Зауважте, що Math.hypotце частина стандарту ES2015. Також є хороший поліфіл на документі MDN .

Тож пройти відстань стає так само просто Math.hypot(x2-x1, y2-y1).

— Девід Гі
джерело

26

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

Якщо у вас є координати, використовуйте формулу для обчислення відстані:

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

Якщо ваша платформа підтримує **оператора , ви можете використовувати це:

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

— екстракт
джерело

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

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);

— джая
джерело