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

2022-08-30 04:39:16

我有画布绘图选项卡,并希望线宽基于两个最后一个鼠标移动坐标更新之间的距离。我会自己翻译距离到宽度,我只需要知道如何获得这些点之间的距离(我已经有了这些点的坐标)。


答案 1

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

如果你有两个点(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

答案 2

请注意,这是ES2015标准的一部分。MDN文档中也有一个很好的polyfill用于此功能。Math.hypot

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