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

时间:2013-08-01 08:43:53

标签: javascript svg trigonometry

我正在尝试找到一条与垂直线中间距离相等的点。我想用这一点用起点和终点创建Bézier曲线,这是我想要找到的另一点。

我计算了垂直线,我可以在该线上绘制点,但问题是根据线的角度,点越来越远离原线,我想成为能够计算它所以它总是X单位。

看看这个显示原始线的JSFiddle,沿着垂直线绘制一些点:

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

如果更改起点和终点,您可以看到这些绘制的点越来越近或越来越远。

无论角度是多少,我怎样才能使它们相距不同?

下面的代码snippit:

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

1 个答案:

答案 0 :(得分:5)

通常,您可以获得如下行的法线坐标:

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

A demo applying this to your case at jsFiddle