Javascript:在垂直线上找到一个距离始终相同的点

Javascript: Find point on perpendicular line always the same distance away

本文关键字:距离 一个 垂直线 Javascript      更新时间:2023-09-26

我正试图找到一个离垂线中心等距离的点。我想用这个点来创建一条Bézier曲线,使用起点和终点,还有我正在努力寻找的另一个点。

我已经计算了垂直线,我可以在这条线上绘制点,但问题是,根据线的角度,点离原始线越来越远或越来越近,我希望能够计算它,所以它总是离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);

通常你可以得到一条直线法线的坐标,如下所示:

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

jsFiddle上的一个将此应用于您的案例的演示。