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

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

你可以缩短var c = Math.sqrt(a*a + b*b); to var c = Math.hypot(a,b); (4认同)
a ^ 2 + b ^ 2 = c ^ 2斜边方程 (2认同)
@RamzanChasygov 在这种情况下没有区别，因为每个值都是平方的！因此，顺序是“7 - 5 = 2”还是“5 - 7 = -2”并不重要。`-2 * -2 = 4` `2 * 2 = 4` (2认同)

Answer 2

请注意,这Math.hypot是ES2015标准的一部分.MDN doc上还有一个很好的polyfill 用于此功能.

因此,获得距离变得如此简单Math.hypot(x2-x1, y2-y1).

Answer 3

如果您有坐标,请使用公式计算距离:

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

如果您的平台支持**运营商,您可以改为使用:

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

Answer 4

这是一种快速查找(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);

Answer 5

要找到2点之间的距离，您需要在宽和高等于垂直和水平距离的直角三角形中找到斜边的长度：

Math.hypot(endX - startX, endY - startY)