JavaScript：查找垂线上始终距离相同的点

Question

我正在尝试寻找一个距离垂线中点等距离的点。我想使用这个点来创建一个贝塞尔曲线，使用起点、终点和这个点。

我已经计算出垂线，并可以在该线上标记点，但问题是根据线的角度不同，点会远离或靠近原始线，我希望能够计算它总是保持X个单位的距离。

请查看此JSFiddle，其中显示了原始线及其上的一些点：

http://jsfiddle.net/eLxcB/1/.

如果更改起点和终点，则可以看到这些标记点相互靠近或相互远离。

无论角度如何，我如何使它们均匀地保持相同的距离？

以下是代码片段：

// Start and end points
var startX = 120
var startY = 150
var endX = 180
var endY = 130

// Calculate how far above or below the control point should be
var centrePointX = ((startX + endX) / 2);
var centrePointY = ((startY + endY) / 2);

// Calculate slopes and Y intersects
var lineSlope = (endY - startY) / (endX - startX);
var perpendicularSlope = -1 / lineSlope;
var yIntersect = centrePointY - (centrePointX * perpendicularSlope);

// Draw a line between the two original points
R.path('M '+startX+' '+startY+', L '+endX+' '+endY);

- dKen

Answer 1

通常你可以通过以下方法得到一条线的法向量坐标：

P1 = {r * cos(a) + Cx, -r * sin(a) + Cy},
P2 = {-r * cos(a) + Cx, r * sin(a) + Cy}.

一个应用到你的情况的演示在 jsFiddle 上。

- Teemu

---

太棒了，非常成功。非常感谢您抽出时间帮助我解决这个问题，真的非常感激。 - dKen

@dKen 不用谢。不过我的代码好像有点小问题，（起始点不能大于结束点）。这是一个修复后的代码（使用简化的角度计算）在一个新的 fiddle 中。 - Teemu

我认为您在上面的代码片段中交换了 sin 和 cos。它与 fiddle 中的不同。 - Anurag Srivastava