在两点之间绘制曲线

Question

我什至不记得从什么时候开始我一直在寻找一种在两点之间绘制曲线的方法。

我已经尝试了很多东西，比如QuadCurves2D 、 Bezier Curve 等……，但我没有找到控制点。

这里的想法是在两个点之间独立绘制一条曲线，它们的位置或它们之间的角度（用户可以通过单击 alt 并在屏幕上拖动来更改点的位置）

这是我到目前为止所得到的......

正如你在上面看到的，曲线是完全错误的。

我期望的是这样的：

Answer 1

第一步：轴对齐您的两个点，使其中一个在 (0,0) 上，另一个在 ([...],0) 上。 假设我们有两点，

P1 = {a,b)
P2 = {c,d}

我们将它们转换为 p1 位于 0,0：

P1 = {0,0}
P2 = {c-a,d-b}

然后我们将 p2 旋转 (0,0) 使其最终位于 x 轴上：

a = -atan2(dy,dx) = -atan2(d-b, c-a)
P2ʹ = {
  p2.x * cos(a) - p2.y * sin(a),
  p2.x * sin(a) + p2.y * cos(a)
}

注意 - 在atan2调用之前，因为我们不想知道“从轴到点”的角度，而是从点到 x 轴的角度。 我们现在有两个轴对齐的点（让我们将新 P2 的旋转 x 坐标称为“v”）：

P1  = { 0 , 0 }
P2ʹ = { v , 0 }

我们现在可以在曲线构建方面做任何我们想做的事情。 虽然通常很难看，但我们可以构建一个二次曲线，其控制点位于(v/2, ...)并且具有高度“任何你想要的基于你想要曲率的强度。这会给我们一个坐标相对于变换不变坐标，所以我们只需反向应用旋转/平移：

C  = (v/2,h), then rotate by -a, then translate by (a,b)

（请注意 - 再次签名）。 我们已经知道 P1 和 P2 在哪里，所以我们不需要在那里做任何计算。 贝塞尔曲线由它们的“船体点”定义，并且在线性变换方面表现良好，因此所有这些平移/旋转业务与绘制曲线的算法没有区别。 只需将六个值插入二次绘制函数中即可。 由 C 控制的从 P1 到 P2 的曲线。

当然，您可能需要三次曲线，因为二次曲线非常丑陋，因此我们可以定义 C1 和 C2，而不是定义 C：

C1 = (v/3, 0)
C2 = (2*v/3, 0)

然后将它们升高/降低相同的数量； 然后我们反旋转和反平移它们并将我们现在拥有的 P1、C1、C2、P2 插入三次贝塞尔绘图函数：完成。 漂亮的曲线。