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

Question

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

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

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

案例 A：

案例 B：

案例 C：

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

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

由于代码需要伴随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();

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

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

How to draw "pretty" bezier curves dynamically?

javascript

canvas

bezier