https://zhuanlan.zhihu.com/p/366797450
1. 前言
贝塞尔曲线(Bézier Curve)[1],也被称为贝塞尔多项式(Bézier Polynomial),是由一系列控制点(Control Point)所定义的一条平滑曲线。Pierre Bézier 于1960年开始利用该曲线设计雷诺的车身线条,故命名为贝塞尔曲线。目前,贝塞尔曲线被广泛应用于图形学、设计以及诸多相关领域中。
2. 定义
贝塞尔曲线可以由如下参数方程表示:
(1)B(t)=∑i=0nCin(1−t)n−itiPi
即:
(2)B(t)=(1−t)nP0+C1n(1−t)n−1tP1+⋅⋅⋅+Cn−1n(1−t)tn−1Pn−1+tnPn
其中 n 为控制点 P 的数目减一(下标从0开始),且 0≤t≤1 。
3. 一次贝塞尔曲线
一次贝塞尔曲线由两个控制点所定义,即 n=1 ,带入公式 (2) 可得:
(3)B(t)=(1−t)P0+tP1
整理可得:
(4)B(t)=P0+(P1−P0)t
由 公式(4) 可以更清楚的理解,一次贝塞尔曲线实际上就是在对 P0 和 P1 两个点做线性插值。根据 t 值的不同,插值所得到的一系列点组成了一次贝塞尔曲线。
一次贝塞尔曲线
4. 二次贝塞尔曲线
二次贝塞尔曲线由三个控制点组成,即 n=2 ,带入公式 (2) 可得:
(5)B(t)=(1−t)2P0+2(1−t)tP1+t2P2
作为参数方程,公式 (5) 对于二次贝塞尔曲线上点的坐标的求解非常高效。然而,从形式上来说,过于抽象,并不利于理解。
要理解二次贝塞尔曲线,可以参考上篇文章中不同维度柏林噪声之间的关系。一维柏林噪声是在两个点之间做平滑插值,二维柏林噪声是利用四个点,做三次插值。实际上,二次贝塞尔曲线也可以由类似的方式求得。
对 P0 和 P1 做线性插值可以得到:
(6)B1(t)=P0+(P1−P0)t
对 P1 和 P2 做线性插值可以得到:
(7)B2(t)=P1+(P2−P1)t
对B1(t) 和 B2(t) 做线性插值可以得到:
(8)B(t)=B1(t)+(B2(t)−B1(t))t
把公式 (6) 和 (7) 带入到公式 (8) ,展开并整理即可得到公式 (5) 。
那么现在,二次贝塞尔曲线的神秘面纱也被揭开了:三个控制点依次连成两条线(首尾不相连),在两条线上做线性插值得到两个点,再在这两个点连成的线上用同一个 t 值做线性插值,即可得到这三个控制点所定义的二次贝塞尔曲线上的点。
二次贝塞尔曲线
5. 三次贝塞尔曲线
在分析和理解二次贝塞尔曲线之后,三次贝塞尔曲线的求解就很简单了:四个控制点依次连成三条线(首尾不相连),在三条线上做线性插值得到三个点,这个三个点又可以依次连成两条线,再在这两条线上利用同一个 t 做线性插值,得到两个新的点,再利用这个 t 在两个新点连成的线上做插值,得到最终的三次贝塞尔曲线上的点。
三次贝塞尔曲线
这里看上去和二次贝塞尔曲线差不多,是中间两个控制点的位置摆放问题。通过调整两个控制点的位置,三次贝塞尔曲线可以实现比二次更复杂的曲线。