贝塞尔曲线控制点投影

时间:2016-01-28 07:59:06

标签: canvas curve bezier

我正在使用方形贝塞尔曲线。对于绘图我使用html5画布。我做了简单的功能,向我显示了2个控制点,我可以轻松修改曲线,只需拖动控制点。我做了here

之类的东西

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

我如何在曲线上设置1到1个项目控制点?

1 个答案:

答案 0 :(得分:0)

首先:cubic-bezier.com网站显示三次曲线,而非方形曲线(实际上称为二次曲线)。

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

但实际上并不是你所问的,听起来像是。你问的是如何根据曲线本身的拖动点来改变曲线形状,这与将控制点投射到曲线上无关。基于拖动曲线上的点来操纵曲线是项目的更多工作;完全可行,在http://pomax.github.io/bezierinfo/#moulding上描述(如果你想自己实现,那么它之前的部分是必读的),但要复杂得多。

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