鲭兜的博客


努力に胜る天才无し


贝塞尔曲线扫盲

1、简介

在数学的数值分析领域中,贝塞尔曲线(Bézier curve)是计算机图形学中相当重要的参数曲线。
贝塞尔曲线于1962年,由法国工程师皮埃尔·贝塞尔(Pierre Bézier)所广泛发表,他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔曲线最初由Paul de Casteljau于1959年运用de Casteljau算法开发,以稳定数值的方法求出贝塞尔曲线。

2、应用

正是因为控制简便却具有极强的描述能力,贝塞尔曲线在工业设计领域迅速得到了广泛的应用。不仅如此,在计算机图形学领域,尤其是矢量图形学,贝塞尔曲线也占有重要的地位。今天我们最常见的一些矢量绘图软件,如 Flash、Illustrator、CorelDraw 等,无一例外都提供了绘制贝塞尔曲线的功能。甚至像 Photoshop 这样的位图编辑软件,也把贝塞尔曲线作为仅有的矢量绘制工具(钢笔工具)包含其中。
贝塞尔曲线在 web 开发领域同样占有一席之地。CSS3 新增了 transition-timing-function 属性,它的取值就可以设置为一个三次贝塞尔曲线方程。在此之前,也有不少 JavaScript 动画库使用贝塞尔曲线来实现美观逼真的缓动效果。

3、构建

3-1、二次曲线

在平面内任选3个不共线的点,依次用线段连接。
无法加载图片
在AB线段上任选一点D,计算该点到线段起点A的距离AD,与该线段总长AB的比例。
无法加载图片
根据上一步得到的比例,从BC线段上找出对应的点E,使得AD:AB = BE:BC。
无法加载图片
连接这两点DE。
无法加载图片
从新的线段DE上再次找出相同比例的点F,使得DF:DE = AD:AB = BE:BC。
无法加载图片
到这里,我们就确定了贝塞尔曲线上的一个点F。接着,让选取的点D在AB线段上从起点A移动到终点B,找出所有的贝塞尔曲线上的点F。所有的点找出来之后,我们也就得到了贝塞尔曲线。
无法加载图片
整个过程的话,可以看动画。
无法加载图片
回过头来看这条贝塞尔曲线,为了确定曲线上的一个点,需要进行两轮取点的操作,因此我们称得到的曲线是二次曲线。

3-2、三次曲线

当控制点变到四个的时候,也就是三次曲线的时候。
无法加载图片
步骤都是相同的,只不过我们每确定一个贝塞尔曲线的点,要进行三轮取点操作。如图,AE:AB = BF:BC = CG:CD = EH:EF = FI:FG = HJ:HI,其中J点就是最终得到的贝塞尔曲线上的一个点。
无法加载图片
然后在AB线段上从A到B枚举E点,最终得到一个三次贝塞尔曲线。
无法加载图片

3-3、一次曲线

看过二次和三次曲线,更高次的贝塞尔曲线大家应该知道怎么画了把。那么比二次曲线更简单的一次(线性)贝塞尔曲线长什么样呢?没错!就是一条线段!
无法加载图片

3-4、高次曲线

要绘制更加复杂的曲线,控制点的增加也只是线性的。这一特点使其不仅在工业设计领域大展拳脚,就连数学基础不好的平面美术设计师们也能容易地掌握。
无法加载图片

4、公式

4-1、一次(线性)公式

给定点$P_0,P_1$,线性贝塞尔曲线只是一条两点之间的线段。
这条线由下式给出:
$$B(t)=(1-t)P_0+tP_1,t\in[0,1]$$
(定比分点坐标公式?)
且其等同于线性插值。

4-2、二次方公式

二次方贝塞尔曲线的路径由给定点$P_0,P_1,P_2$的函数B(t)追踪:
$$B(t)=(1-t)\left[(1-t)P_0+tP_1\right]+t\left[(1-t)P_1+tP_2\right]\\={(1-t)}^2P_0+2t(1-t)P_1+t^2P_2,t\in[0,1]$$
(可以看出类似平方和公式)
TrueType字型就运用了以贝塞尔样条组成的二次贝塞尔曲线。

4-3、三次方公式

$P_0,P_1,P_2,P_3$四个点在平面或在三维空间中定义了三次方贝塞尔曲线。曲线起始于$P_0$走向$P_1$,并从$P_2$的方向来到$P_3$。一般不会经过$P_1$或$P_2$;这两个点只是在那里提供方向资讯。$P_0$和$P_1$之间的间距,决定了曲线在转而趋进$P_3$之前,走向$P_2$方向的“长度有多长”。
曲线的参数形式为:
$$B(t)={(1-t)}^3P_0+3t{(1-t)}^2P_1+3t^2(1-t)P_2+t^3P_3,t\in[0,1]$$
(可以看出系数和次数完全符合二项式定理)
现代的成象系统,如PostScript、Asymptote和Metafont,运用了以贝塞尔样条组成的三次贝塞尔曲线,用来描绘曲线轮廓。

4-4、一般参数公式

$n$阶贝塞尔曲线可如下推断。给定点$P_0、P_1、…、P_n$,其贝塞尔曲线即:
$$B(t)=\displaystyle\sum_{i=0}^nC_n^i{(1-t)}^{n-i}t^iP_i,t\in[0,1]$$
(很像${(a+b)}^n$的二项式定理,称作n阶的伯恩斯坦基底多项式)
递推的看的话,n阶的贝塞尔曲线的一点,即对应两个n-1阶贝塞尔曲线点的插值。

4-5、公式说明

1、开始于$P_0$并结束于$P_n$的曲线,即所谓的端点插值法属性。
2、曲线是直线的充分必要条件是所有的控制点都位在曲线上。同样的,贝塞尔曲线是直线的充分必要条件是控制点共线。
3、曲线的起始点(结束点)相切于贝塞尔多边形的第一节(最后一节)。
4、一条曲线可在任意点切割成两条或任意多条子曲线,每一条子曲线仍是贝塞尔曲线。
5、一些看似简单的曲线(如圆)无法以贝塞尔曲线精确的描述,或分段成贝塞尔曲线(虽然当每个内部控制点对单位圆上的外部控制点水平或垂直的的距离为$\dfrac{4(\sqrt{2}-1)}{3}$时,分成四段的贝塞尔曲线,可以小于千分之一的最大半径误差近似于圆)。
6、位于固定偏移量的曲线(来自给定的贝塞尔曲线),又称作偏移曲线(假平行于原来的曲线,如两条铁轨之间的偏移)无法以贝塞尔曲线精确的形成(某些琐屑实例除外)。无论如何,现存的启发法通常可为实际用途中给出近似值。

5、特点

用“贝塞尔”工具无论是画直线或是曲线,都非常简单,随手可得。其操作特点是通过用鼠标在面板上放置各个锚点,根据锚点的路径和描绘的先后顺序,产生直线或者是曲线的效果。我们都知道路径由一个或多个直线段或曲线段组成。锚点标记路径段的端点。在曲线段上,每个选中的锚点显示一条或两条方向线,方向线以方向点结束。方向线和方向点的位置确定曲线段的大小和形状。移动这些元素将改变路径中曲线的形状。路径可以是闭合的,没有起点或终点(如圆圈),也可以是开放的,有明显的端点(如波浪线)。