在两点之间绘制曲线

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电话前面 - 因为我们不想知道从一个点到另一个点的角度＆＃34;，而是从点到x轴。我们现在有两个轴对齐点（让我们调用旋转x坐标用于新P2＆＃34; v＆＃34;）：

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

我们现在可以在曲线构造方面做任何我们想做的事情。虽然通常非常丑陋，但我们可以构建一个二次曲线，其控制点位于(v/2, ...)并且具有高度＆＃34;无论您想要什么，基于您想要曲率的强度。这将为我们提供相对于变换不变坐标的坐标，因此我们只是反向应用旋转/平移：

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

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

当然你可能想要一个三次曲线，因为二次曲线非常难看，所以我们不能定义一个C，而是定义一个C1和C2：

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

然后以相同的数量提高/降低它们;然后我们反旋转并反转换它们并将我们现在拥有的P1，C1，C2，P2插入一个立方贝塞尔绘图函数：完成。漂亮的曲线。