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

Question

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

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

632 5

javascript canvas

5 ответов:

Comments

Ничего не найдено.

Igor Šarčević · Accepted Answer · 2018-03-18 21:06:36

вы можете сделать это с теорема Пифагора

Если у вас есть две точки (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

David Gee · Accepted Answer · 2015-11-16 21:29:53

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

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

ekstrakt · Accepted Answer · 2014-01-04 06:46:53

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

если у вас есть координаты, используйте формулу для расчета расстояния:
var dist = Math.sqrt( Math.pow((x1-x2), 2) + Math.pow((y1-y2), 2) );

Daniel · Accepted Answer · 2017-06-15 18:49:26

расстояние между двумя координатами 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);
};

jaya · Accepted Answer · 2015-10-28 00:26:16

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