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

Posted 2023-02-16

【中文标题】获取画布中两点之间的距离

【英文标题】：Get distance between two points in canvas

【发布时间】：2014-01-21 21:47:48

【问题描述】：

我有画布绘图选项卡，并希望 lineWidth 基于两个最后一次 mousemove 坐标更新之间的距离。我会自己将距离转换为宽度，我只需要知道如何获得这些点之间的距离（我已经有了这些点的坐标）。

【参考方案1】：

这是一个快速的单线查找(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`)

【参考方案2】：

要求2点之间的距离，需要在一个宽高等于纵横距离的直角三角形中求斜边的长度：

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

【参考方案3】：

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

如果有坐标，用公式计算距离：

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

如果您的平台supports the ** operator，您可以改用它：

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

【参考方案4】：

你可以用毕达哥拉斯定理做到这一点

如果你有两个点 (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( aa + bb ); to var c = Math.hypot(a,b);

a^2 + b^2 = c^2 斜边方程

去x1 - x2, y1 - y2或者x2 - x1, y2 - y1有区别吗？

@RamzanChasygov 在这种情况下没有区别，因为每个值都是平方的！所以订单是7 - 5 = 2 还是5 - 7 = -2 都无关紧要。 -2 * -2 = 42 * 2 = 4

【参考方案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);
;

【讨论】：

你应该使用Math.abs而不是diff。

您不需要使用diff，因为对数字进行平方将始终得到正数。如果x1 - y1 是负数，(x1 - y1) ^ 2 仍然是正数。

【参考方案6】：

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

所以获取距离变得像Math.hypot(x2-x1, y2-y1) 一样简单。

【讨论】：

当性能很重要时，我不建议使用Math.hypot() 来计算距离。它慢了大约 100 倍。

这里解释了为什么 Math.hypot 更慢，主要是因为它会更准确。这对你来说可能很重要，也可能无关紧要。 ***.com/questions/3764978/…

【参考方案7】：

我经常在我做的事情中使用这个计算，所以我喜欢将它添加到 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);