如何動態繪制“漂亮的”貝塞爾曲線？

Question

我做了一個小提琴： https : //jsfiddle.net/ahvonenj/yp0o728h/

您可以按下鼠標左鍵以移動紅色圓圈，並且更新在兩點之間繪制的貝塞爾曲線，但是我不希望這樣做。

我想動態計算控制點，以便曲線看起來像這樣：

情況A：

情況B：

案例C：

因此，基本上，我希望曲線始終從點A到點B繪制一條小的“漂亮”曲線，而不管這些點的位置如何。 畫一條直線看起來並不漂亮，所以我想使用貝塞爾曲線來使該線稍微彎曲。

問題在於計算控制點位置。 這是如何實現的，並且有一種簡單的方法可以實現，因為我已經看到許多應用程序似乎在各處都使用動態貝塞爾曲線。

由於需要代碼來伴隨jsfiddle-links，因此這是當前使用靜態控制點繪制貝塞爾曲線的線：

ctx.bezierCurveTo(20, 100, 200, 100, c2.x, c2.y);

我希望我不必進行大量計算即可得出控制點位置。

Answer 1

沒有大量的計算： https : //jsfiddle.net/khrismuc/6fjhLkbv/

var dx = c2.x - c1.x;
var dy = c2.y - c1.y;

ctx.beginPath();
ctx.moveTo(c1.x, c1.y);
ctx.bezierCurveTo(c1.x + dx * 0.33, c1.y, c1.x + dx * 0.67, c2.y, c2.x, c2.y);
ctx.stroke();

如果希望它們像這樣傾斜，則計算控制點會稍微復雜一些。