了解贝塞尔曲线的数学




Android贝塞尔区域填充颜色_曲线插补公式


贝塞尔曲线在计算机图形学中被大量使用,通常可以产生平滑的曲线,但是它们是非常简单的工具。 如果您曾经使用过Photoshop,则可能会偶然发现名为"锚点"的工具,您可以在其中放置锚点并用它们绘制一些曲线……是的,这些是贝塞尔曲线。 或者,如果您使用了基于矢量的图形SVG,那么它们也将使用贝塞尔曲线。 让我们看看它是如何工作的。

定义

给定n + 1个点(P0,…,Pn)称为控制点,这些点定义的贝塞尔曲线定义为:


Android贝塞尔区域填充颜色_贝塞尔曲线_02


> eq. 1

其中B(t)是伯恩斯坦多项式,并且:


Android贝塞尔区域填充颜色_贝塞尔曲线_03


> eq. 2

您会注意到,该伯恩斯坦多项式看起来很像牛顿二项式公式中的k(th)项,即:


Android贝塞尔区域填充颜色_锚点_04


> eq. 3

实际上,伯恩斯坦多项式不过是(t +(1- t))^ n = 1的展开式中的k(th)项。这就是为什么如果将所有Bi加到n,则得到1 。 无论如何。

二次贝塞尔曲线

由于P(t)的度为2,所以二次贝塞尔曲线称为3个控制点的贝塞尔曲线。让我们计算给定3个控制点的贝塞尔曲线,并探索一些我们可能会发现的特性! 记住,等式 1代表n + 1点,因此在我们的情况下n = 2。


Android贝塞尔区域填充颜色_曲线插补公式_05


> eq. 4

请注意,P(t)不会返回数字,而是返回曲线上的一个点。 现在我们只需要选择三个控制点并在[0,1]范围内评估曲线。 我们可以很容易地在Python中做到这一点。


Android贝塞尔区域填充颜色_Android贝塞尔区域填充颜色_06


您会注意到曲线在第一个和最后一个控制点处开始和结束。 对于任何数量的点,该结果都是正确的。 由于t的范围是0到1,我们可以通过在t = 0和t = 1时评估P(t)来证明这一点。 使用等式 1:


Android贝塞尔区域填充颜色_Android贝塞尔区域填充颜色_07


> eq. 4


Android贝塞尔区域填充颜色_Android贝塞尔区域填充颜色_08


> eq. 5

因为曲线从P0到P2,所以在这种情况下,P1完全确定曲线的形状。 在您周围移动P1可能会注意到以下几点:


Android贝塞尔区域填充颜色_贝塞尔曲线_09


贝塞尔曲线始终包含在由控制点形成的多边形中。 因此,此多边形称为控制多边形或贝塞尔曲线多边形。 此属性还适用于任意数量的控制点,这使得使用软件时它们的操作非常直观。


Android贝塞尔区域填充颜色_曲线插补公式_10


矩阵表示

实际上,我们可以使用矩阵乘法表示贝塞尔公式,这在其他情况下可能有用,例如用于拆分贝塞尔曲线。 如果回到示例,我们可以重写P(t),如下所示:


Android贝塞尔区域填充颜色_Android贝塞尔区域填充颜色_11


> eq. 6

因此,所有关于二次Bézier曲线的信息都被压缩到一个矩阵M中。现在,我们可能想要查找矩阵的系数而不必执行所有这些步骤,并且以一种易于编程的方式。 由于矩阵的系数只是每个Pi前面的多项式的系数,因此我们要寻找的是伯恩斯坦多项式方程的展开形式。 2。

还有一件事:如果扩展Bi(t),我们将在Pi前面获得多项式,该多项式对应于矩阵中的第i(th)列。 但是,这并不是很方便,如果我们可以获取行,那么编程起来会更容易。 也就是说,您可能会注意到矩阵的第i(th)行与反向(ni)(th)列完全相同,并且反向(ni)(th)列的系数不过是 B(ni)(t)。 好吧,做吧!


Android贝塞尔区域填充颜色_锚点_12


> eq. 7

您可能要参考eq。 2和等式 3,如果您遇到麻烦。

因此,矩阵的系数不过是t前面的系数,表示:


Android贝塞尔区域填充颜色_多项式_13


> eq. 8

插补

贝塞尔曲线的一个有趣应用是绘制一条通过一组预定义点的平滑曲线。 之所以有趣,是因为P(t)的公式会产生点,并且形式不为y = f(x),因此一个x可以具有多个y(基本上是一个可以"向后移动"的函数)。 例如,我们可以绘制如下内容:


Android贝塞尔区域填充颜色_贝塞尔曲线_14


但是,产生此结果的数学方法并不简单,我将把它留给专门的文章。

同时,您可以使用eq在此为任意数量的控制点编程Bézier曲线的常规版本。 1。

运行该程序,您将在标题中显示图形。

贝塞尔曲线的介绍就是这样。 希望您能学到一些东西,不要犹豫,评论您可能遇到的任何问题!