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

Question

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

Answer 1

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

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

Answer 2

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

Если у вас есть координаты, использовать формулу для вычисления расстояния:

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

Answer 3

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

Update:

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

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

Answer 4

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

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

Answer 5

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