如何动态绘制"pretty"贝塞尔曲线?

How to draw "pretty" bezier curves dynamically?

我做了一个小fiddle:https://jsfiddle.net/ahvonenj/yp0o728h/

您可以按下左键单击以移动红色圆圈,两点之间绘制的贝塞尔曲线会更新,但不是我希望的方式。

我想动态计算控制点,使曲线看起来像这样:

案例 A:

案例 B:

案例 C:

所以基本上我希望曲线总是从 A 点到 B 点形成一条 "pretty" 小曲线,无论这些点的位置如何。画直线不太好看,所以想用贝塞尔曲线把线稍微弯曲一下。

问题在于计算控制点的位置。这是如何实现的,有没有一种简单的方法可以做到这一点,因为我看到许多应用程序似乎到处都使用动态贝塞尔曲线。

由于代码需要伴随jsfiddle-links,这里是目前用静态控制点绘制贝塞尔曲线的线:

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

我希望不必进行大量计算即可得出控制点位置。

不是大量计算: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();

如果你想让它们成这样的角度,计算控制点会稍微复杂一些。