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

100

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

javascript canvas

— 厌恶
source

208

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

如果您有两个点（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

— 伊戈尔·萨尔奇维奇（IgorŠarčević）
source

9

您可以缩短var c = Math.sqrt（a + b b）; 到var c = Math.hypot（a，b）;

— evgpisarchik

2

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

— Kad

如果去x1 - x2, y1 - y2还是有什么不同x2 - x1, y2 - y1吗？

— Ramzan Chasygov

1

@RamzanChasygov在这种情况下没有区别，因为每个值都是平方的！因此，顺序是喜欢7 - 5 = 2还是5 - 7 = -2不重要。-2 * -2 = 4 2 * 2 = 4

— rdmurphy，

166

请注意，这Math.hypot是ES2015标准的一部分。MDN文档上还有一个很好的polyfill来实现此功能。

因此，获得距离变得和一样容易Math.hypot(x2-x1, y2-y1)。

— 大卫·吉
source

26

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

— ekstrakt
source

1

两个坐标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);
};

展开摘要

— 丹尼尔
source

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

— Moshe Simantov

3

您不需要使用diff平方，因为总是会产生正数。如果x1 - y1为负，(x1 - y1) ^ 2则仍为正。

— Redwolf节目

0

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

— 贾亚
source