javascript - 如何在html Canvas 中制作平行线

Question

我有这些条件:

1. Point A, B and C are created.
2. Point A to Point B will create a line.
3. Parallel lines are created depending on the position of Point A, B and C (refer to the figure below).
4. If you move Point A, the lines will also move but Points B and C remain on their respective positions.
5. They can be moved at any position.

我想要的是创建这个:

Answer 1

考虑下面的图 1(我相信您已经知道这个基本的 2D 几何形状，但如果没有这个，我的回答将是不完整的):

A 点和 B 点的坐标已知，我们希望找到可用于在已知 x 坐标时计算 y 坐标的函数，以使点 (x,y) 位于直线上。从图1:

k = tan(alpha) = (y2 - y1) / (x2 - x1) - the slope of line

将 A 或 B 的坐标放入众所周知的直线方程中 y = kx + m我们可以计算出m使等式完整。有了这个等式，对于任何坐标 x 我们都可以使用这个等式计算坐标 y。它的好处是它不依赖于点 A 和 B 的位置或线的斜率( Angular )-您将不得不处理垂直/水平<的特殊情况/strong> 根据此等式，y/x 将无限大的直线。

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

我们这里的情况非常相似，A点和C点之间有一条线，B点和D点之间有一条线。我假设点A在坐标系的中心!通常情况并非如此，但这实际上不是限制，因为您可以执行将 A 置于中心的翻译，然后进行计算，然后将所有内容翻译回来。

使用开头所述的技巧，您可以找到连接 A 和 C 点的直线以及连接 B 和 D 点的直线的直线方程(D 坐标可以轻松计算)。假设您就是这么做的:

A-C: y = k1*x (m is zero as line goes through the center A)

B-D: y = k2*x + m2 (m2 is not zero as line doesn't go through the center A)

最后是您可以用来绘制这些平行线的算法:

1. 在 x1 和 x3 之间选择一个空间作为 x 坐标。例如，如果你想要 4 行，这个空间将是 s = (x3 - x1) / 4等等。
2. 设定值x_start = x1 + s (and later x_start += s) ，并使用 A-C 线的方程式计算 y 坐标 y_end = k1*x_start .这将为您提供位于 A-C 线上的点，这是您的线的起点。
3. 类似地，计算将位于连接 B 和 D 的直线上的终点:

x_end = x2 + s (later x_end += s)

y_end = k2*x_end + m2

1. 使用这些等式计算要绘制的所有线的点 (x_start,y_start) 和 (x_end,y_end)(其中有 |x3 - x1| / desired_num_of_lines)。

每次 A 点移出当前 A-C 线时，您都必须构建新方程，因为每次发生这种情况时，A-C(和 B-D)线的斜率都会发生变化，从而使当前方程无效。

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