贝塞尔曲线 (Bézier Curve)

范叶亮 / 2019-02-19

分类: 数学, 可视化 / 标签: 贝塞尔曲线, Bézier Curve / 字数: 1187

---

知道贝塞尔曲线 (Bézier Curve) 这个名字已经有很长一段时间了，但一直没有去详细了解一番。直到最近想要绘制一个比较复杂的曲线，才发现很多工具都以贝塞尔曲线为基础的，这包括 Adobe 全家桶中的钢笔工具，还有 OmniGraffle 中的曲线。迫于仅靠猜其是如何工作的但一直没猜透的无奈，只能去详细了解一下其原理再使用了。

贝塞尔曲线 (Bézier Curve) 是由法国工程师皮埃尔·贝兹 (Pierre Bézier) 于 1962 年所广泛发表，他运用贝塞尔曲线来为汽车的主体进行设计 1。贝塞尔曲线最初由保尔·德·卡斯特里奥 (Paul de Casteljau) 于 1959 年运用德卡斯特里奥算法 (De Casteljau’s Algorithm) 开发，以稳定数值的方法求出贝塞尔曲线。

线性贝塞尔曲线

给定点 P0,P1，线性贝塞尔曲线定义为：

(1)B(t)=(1−t)P0+tP1,t∈[0,1]

不难看出，线性贝塞尔曲线即为点 P0 和 P1 之间的线段。

对于 P0=(4,6),P1=(10,0)，当 t=0.25 时，线性贝塞尔曲线如下图所示：

整个线性贝塞尔曲线生成过程如下图所示：

二次贝塞尔曲线

给定点 P0,P1,P2，二次贝塞尔曲线定义为：

(2)B(t)=(1−t)2P0+2t(1−t)P1+t2P2,t∈[0,1]

对于 P0=(0,0),P1=(4,6),P2=(10,0)，当 t=0.25 时，二次贝塞尔曲线如下图所示：

整个二次贝塞尔曲线生成过程如下图所示：

三次贝塞尔曲线

给定点 P0,P1,P2,P3，三次贝塞尔曲线定义为：

(3)B(t)=(1−t)3P0+3t(1−t)2P1+3t2(1−t)P2+t3P3,t∈[0,1]

对于 P0=(0,0),P1=(−1,6),P2=(6,6),P3=(12,0)，当 t=0.25 时，三次贝塞尔曲线如下图所示：

整个三次贝塞尔曲线生成过程如下图所示：

一般化的贝塞尔曲线

对于一般化的贝塞尔曲线，给定点 P0,P1,⋯,Pn， n 次贝塞尔曲线定义为：

(4)B(t)=∑i=0n(ni)(1−t)n−itiPi,t∈[0,1]

(5)bi,n(t)=(ni)(1−t)n−iti

称之为 n 阶 Bernstein 多项式，点 Pi 称为贝塞尔曲线的控制点。从生成过程来看，贝塞尔曲线是通过 n 次中介点 (Qj,Rk,Sl) 生成的，一个更加复杂的四次贝塞尔曲线 (t=0.25) 如下图所示：

整个四次贝塞尔曲线生成过程如下图所示：

其中，Q0=(1−t)P0+tP1，R0=(1−t)Q0+tQ1，S0=(1−t)R0+tR1，B=(1−t)S0+tS1 为构成贝塞尔曲线的点。

上述图形和动画的绘制代码请参见这里。

在很多绘图软件中，钢笔工具使用的是三次贝塞尔曲线，其中起始点和结束点分别对应 P0 和 P1，起始点和结束点的控制点分别对应 P2 和 P3。

在利用钢笔工具绘图时，可以参考如下建议来快速高效地完成绘图 2：

1. 控制点尽可能在曲线的最外侧或最内侧。
2. 除了曲线的结束处外，控制点的控制柄尽可能水平或垂直。
3. 合理安排控制点的密度。

下面两张图分别展示了一个原始的字母图案，以及参考上述建议利用贝塞尔曲线勾勒出来的字母图案边框：

最后推荐一个网站 The Bezier Game，可以帮助更好的理解和掌握基于贝塞尔曲线的钢笔工具使用。

← 如何阅读一本书 (How to Read a Book) 关不掉的浏览器标签页 (Browser Tabs You do not Close) →

---