如何绘制＆＃34;漂亮＆＃34;贝塞尔曲线动态？

Question

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

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

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

案例A：

案例B：

案例C：

所以基本上我希望曲线总能做一个小的，＃34;漂亮＆＃34;无论点如何定位，从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();

如果你希望它们像这样倾斜，计算控制点会稍微复杂一些。