如何在html画布中制作平行线

Question

我有这些条件:

1. 创建点A,B和C.
2. 点A到点B将创建一条线.
3. 根据A,B和C点的位置创建平行线(参见下图).
4. 如果移动A点,线条也会移动,但B点和C点保持在各自的位置.
5. 它们可以在任何位置移动.

我想要的是创造这个:

Answer 1

考虑下面的图1(我确定你已经知道这个基本的二维几何,但没有这个,我的答案将是不完整的):

点A和B的坐标是已知的,我们希望找到可用于在x坐标已知的情况下计算y坐标的函数,使点(x,y)位于线上.从图1:

k = tan(alpha)=(y2-y1)/(x2-x1) - 线的斜率

将A或B的坐标放入众所周知的线方程中,y = kx + m我们可以计算m出方程式的完整性.有了这个等式,对于任何坐标x,我们可以使用这个等式计算坐标y.关于它的好处是它不依赖于点A和B的位置或线的斜率(角度) - 你将需要处理垂直/水平线的特殊情况,其中y/x将是根据这个等式无限.

回到你的问题.看看下面的图2:

我们这里的情况非常相似,A点和C点之间有一条直线,B点和D点之间有一条直线.我假设 A点位于坐标系的中心!这通常不会是这种情况,但是这真的不是,你可以进行限制,转换也将增加在该中心,然后进行计算,然后翻译一切恢复.

使用开头描述的技术,您可以找到连接A和C点的线以及连接B和D点的线的线方程(可以很容易地计算D坐标).我们假设你做到了这一点:

AC:y = k1*x(当线穿过中心A时m为零)

BD:y = k2*x + m2(m2不为零,因为线不通过中心A)

最后,您可以使用该算法绘制这些平行线:

1. 选择要在x1和x3之间取x坐标的空间.例如,如果您想要4行,则此空间将是s = (x3 - x1) / 4,依此类推.
2. 设置值x_start = x1 + s (and later x_start += s),并使用AC线的等式计算y坐标y_end = k1*x_start.这将为您提供位于AC线上的点,这是您的线的开始.
3. 同样,计算将连接B和D的线上的终点:

x_end = x2 + s(后来的x_end + = s)

y_end = k2*x_end + m2

4. 使用这些等式计算要绘制的所有行的点(x_start,y_start)和(x_end,y_end)(有|x3 - x1| / desired_num_of_lines它们).

每当A点移出当前AC线时,您将不得不形成新的方程,因为每次发生这种情况时,AC(和BD)线的斜率改变使当前方程无效.

我不打算编写任何JS代码,但是拥有可能的解决方案背后的逻辑应该为您提供更多足够的信息来推进您自己的实现.