Javascript:在垂直线上找到的点总是相距相同的距离 [英] Javascript: Find point on perpendicular line always the same distance away

问题描述

我试图找到一个与垂直线的中心相等距离的点.我想使用此点使用起点和终点以及要尝试找到的其他点来创建贝塞尔曲线.

I'm trying to find a point that is equal distance away from the middle of a perpendicular line. I want to use this point to create a Bézier curve using the start and end points, and this other point I'm trying to find.

我已经计算出了垂直线，并且可以在该线上绘制点，但是问题是，根据线的角度，这些点会越来越远或更接近原始线，而我想能够计算出来，所以它总是X个单位.

I've calculated the perpendicular line, and I can plot points on that line, but the problem is that depending on the angle of the line, the points get further away or closer to the original line, and I want to be able to calculate it so it's always X units away.

看看这个JSFiddle，它显示了原始线，并沿着垂直线绘制了一些点:

Take a look at this JSFiddle which shows the original line, with some points plotted along the perpendicular line:

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

如果更改起点和终点，则可以看到这些标绘的点越来越靠近或更远.

If you change the start and end points, you can see these plotted points getting closer together or further away.

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

How do I get them to be uniformly the same distance apart from each other no matter what the angle is?

下面的代码段:

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

推荐答案

通常，您可以像这样获得线法线的坐标:

Generally you can get the coordinates of a normal of a line like this:

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

在jsFiddle上将其应用于您的案例的演示.

这篇关于Javascript:在垂直线上找到的点总是相距相同的距离的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！