贝塞尔曲线控制点投影

Question

我正在使用方形贝塞尔曲线。对于绘图，我使用 html5 canvas。我制作了简单的功能，显示了 2 个控制点，我可以轻松修改曲线，只需拖动控制点。我做了类似 this

的东西

在我的示例中，我显示了 2 个控制点，用户可以拖动它们。但是我想在曲线上显示一些点，所以我想找到控制点在曲线上的投影，用户可以在曲线上拖动这个假点，函数将改变原始控制点的位置。

如何在曲线上一对一投影控制点？

Answer 1

首先：cubic-bezier.com 站点显示的是三次曲线，而不是方曲线（实际上称为二次曲线）。

关于如何投射控制点：暴力破解它。我在 http://pomax.github.io/bezierinfo/#projections 上描述了详细信息，但要点是您只需沿着曲线 运行 增加 t 值，直到找到到曲线外点的最短距离。

但这实际上并不是您要问的，听起来像是。您问的是如何根据拖动曲线本身上的点来更改曲线形状，这实际上与将控制点投影到曲线上无关。基于拖动曲线上的点来操纵曲线比投影要多得多；完全可行，在 http://pomax.github.io/bezierinfo/#moulding 上进行了描述（如果您想自己实现，则需要阅读之前的部分），但要复杂得多。

显然，真正的解决方案是不要自己编写代码。使用已经为您完成所有这些工作的库，不要浪费时间重新发明轮子，专注于使用其他人已经制作的轮子来改善您的网站用户体验。