在兩點之間繪制曲線

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 插入三次貝塞爾繪圖函數：完成。 漂亮的曲線。