【问题标题】:Javascript: Find point on perpendicular line always the same distance awayJavascript:在垂直线上查找点的距离始终相同
【发布时间】:2013-08-01 08:43:52
【问题描述】:

我试图找到一个与垂直线中点距离相等的点。我想使用这个点来创建一条使用起点和终点的贝塞尔曲线,以及我试图找到的另一个点。

我已经计算了垂直线,我可以在这条线上绘制点,但问题是根据线的角度,这些点会变得更远或更接近原始线,我想成为能够计算它,所以它总是 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);

【问题讨论】:

    标签: javascript svg trigonometry


    【解决方案1】:

    一般你可以像这样得到一条线的法线坐标:

    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.

    【讨论】:

    • 太棒了,很有魅力。非常感谢您抽出宝贵时间帮助我完成这项工作,非常感谢。
    • @dKen 不客气。但是,我的小提琴代码似乎有点缺乏,(起点不能大于端点)。新fiddle 中的固定代码(简化角度计算)。
    • 我认为您在上面的代码片段中已经互换了sincos。它与小提琴不同
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2020-12-24
    • 1970-01-01
    • 2020-12-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多