几何 - 计算点到线的距离

时间:2015-07-18 19:12:52

标签: javascript math geometry

我想计算一个点与由2个点定义的直线的距离。

我正在使用javascript,这就是我用维基百科提出的:https://en.wikipedia.org/wiki/Distance_from_a_point_to_a_line

function distance(point1, point2, x0, y0) {
    return ((Math.abs((point2.y - point1.y) * x0 - 
                     (point2.x - point1.x) * y0 + 
                     point2.x * point1.y - 
                     point2.y * point1.x)) /
            (Math.pow((Math.pow(point2.y - point1.y, 2) + 
                       Math.pow(point2.x - point1.x, 2)), 
                      0.5)));
}

问题在于,如果输入以下参数,它似乎不准确:

alert(distance({ x: 1, y: 1 }, { x: 2, y: 2 }, 1, 0));

返回1/sqrt(2)而不是返回1(这是点(1, 0)与点(1, 1)之间的距离

编辑:我理解上面的代码没有做我想做的事情。它从一个点到一个由2点代表的线,但该线是INFINITE(我想要的东西更像是一个有2个终点的矢量)

我找到了答案here

2 个答案:

答案 0 :(得分:4)

我认为1 / sqrt(2)= 0.7071 ......是对的。查看图片:enter image description here

修改

var board = JXG.JSXGraph.initBoard('jxgbox', {
  boundingbox: [-1, 3, 3, 0],
  keepaspectratio: true,
  axis: true
});

var f1 = function(x) {
  return x;
};

board.create('functiongraph', [f1]);

board.create('point', [1, 1], {
  size: 4,
  name: '1,1'
});
board.create('point', [2, 2], {
  size: 4,
  name: '2,2'
});
var p1 = board.create('point', [1, 0], {
  size: 4,
  name: '1,0'
});
var p2 = board.create('point', [0.5, 0.5], {
  size: 0,
  name: '1,0'
});
var li2 = board.create('line', [p1, p2], {
  straightFirst: false,
  straightLast: false,
  strokeWidth: 2,
  dash: 2
});
<html>

<head>
  <link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
  <script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
</head>

<body>
  <div id="jxgbox" class="jxgbox" style="width:500px; height:600px;"></div>
</body>

</html>

答案 1 :(得分:1)

为了增加一个数学观点,下面是一个数学“证明”你的函数正确的原因:

点和线之间的最短距离是垂直线到点的距离。在这种情况下,我们知道线和x轴之间的角度是45度,我们知道从origo到(1,0)的距离等于1.

使用:

formula

...我们看到你的结果是正确的,因为sin(角度)=直角三角形/斜边的相反侧。