在 svg 中学习点到直线（线段）的最短距离算法

怎么计算点到直线的最短距离？学过数学的都会觉得这个话题不难，然而真正在编程中实操起来，还是有点不对劲的。你会觉得小时候，我的数学打过满分呐，现在这些知识却全都忘记了。

任何一条直线都可以用下面这种方式表示出来：

$Ax + By + C = 0$

但是，我们有没有想过为什么呢？为什么可以用这种形式表示？

把上面的公式两边都除以 B，得：

$y = -{A \over B}x – {C \over B}$

这样就变成我们熟悉的下面这种公式了：

$ y = kx + b $

这样就能通过两点，求出 k、b 了。B = 1，A = -k；C = -b。

我们都知道点到直线的最短距离，是点到直线上垂足的那个距离。有个数学公式是这样写的：

$d = {|Ax_0 + By_0 + C| \over \sqrt{A^2 + B^2}}$

我第一次看到上面这个公式是懵逼的，我有学过这个？具体的推导过程我就不写了，大家可以看下面的视频。

按照上面的方式就可以解出答案了，但在我们编程的实际应用中，是没有直线这种无限长的东西，只有线段，因此还有更好的解法，请看下面的 codepen：

向量计算

用向量的方式计算点到线段的距离。向量运算早已忘记了，花了好长时间才回忆起来，为了理解其中的原理，需要看懂下面的公式。求 P 点到线段 AB 的最短距离：

具体的代码写在了上面 codepen 的例子里。

参考链接

• Find the distance between a point and a line segment
• 点到线段的最短距离——矢量法