获取画布中两点之间的距离

我有画布绘图选项卡，并希望 lineWidth 是基于两个最后的鼠标移动坐标更新之间的距离。我将自己进行距离到宽度的平移，我只需要知道如何得到这些点之间的距离(我已经有了这些点的坐标)。

168668 次浏览
小开

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);
小开
最佳答案

你可以用毕达哥拉斯定理来做

如果你有两个点(x1，y1)和(x2，y2) 然后你可以计算 x 和 y 的差值，我们称之为 a 和 b。

enter image description here

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


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


// c is the distance
小开

我在做东西的时候经常用到这个计算，所以我喜欢把它添加到 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);
小开

请注意，Math.hypot是 ES2015标准的一部分。

所以得到距离变得像 Math.hypot(x2-x1, y2-y1)一样容易。

小开

两个坐标 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.hypot(endX - startX, endY - startY)
小开

这里有一个快速的一行程序来查找 (x1, y1)和 (x2, y2)之间的距离

const distance = (x1, y1, x2, y2) => Math.hypot(x2 - x1, y2 - y1);

下面是一个简短的可运行演示:

const distance = (x1, y1, x2, y2) => Math.hypot(x2 - x1, y2 - y1);


var x1 = 1
var y1 = 5


var x2 = 4
var y2 = 5


var d = distance(x1, y1, x2, y2)


console.log(`The distance between (${x1}, ${y1}) and (${x2}, ${y2}) is ${d}`)


提交答案