贝塞尔曲线（Bezier Curve）原理及公式推导

1. 定义

贝塞尔曲线(Bezier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。贝塞尔曲线是计算机图形学中相当重要的参数曲线，在一些比较成熟的位图软件中也有贝塞尔曲线工具，如PhotoShop等。

贝塞尔曲线的一些特性：

• 使用$n$个控制点 { P 1 , P 2 , . . . , P n } \{P_1,P_2,…,P_n\} {
  P1​,P2​,...,Pn​}来控制曲线的形状
• 曲线通过起始点$P_1$和终止点$P_n$，接近但不通过中间点$P_2$~$P_{n-1}$

2. 直观理解

Step 1. 在二维平面内选三个不同的点并依次用线段连接

Step 2. 在线段$AB$和$BC$上找到$D$、$E$两点，使得$\frac{AD}{DB}=\frac{BE}{EC}$

Step 3. 连接$DE$，并在$DE$上找到$F$点，使其满足$\frac{DF}{FE}=\frac{AD}{DB}=\frac{BE}{EC}$（抛物线的三切线定理）

Step 4. 找出符合上述条件的所有点

上述为一个二阶贝塞尔曲线。同样的有$n$阶贝塞尔曲线：

曲线	图示
一阶
三阶
四阶
五阶

3. 公式推导

3.1 一次贝塞尔曲线（线性公式）

定义：给定点$P_0$、$P_1$，线性贝塞尔曲线只是一条两点之间的直线，这条线由下式给出，且其等同于线性插值：
$$B(t)=P_0+(P_1-P_0)t=(1-t)P_0+t{P}_1,t\in [0,1]$$

其中，公式里的$P_0$、$P_1$同步表示为其$x$或$y$轴坐标。

假设$P_0$坐标为$(a,b)$，$P_1$坐标为$(c,d)$，$P_2$坐标为$(x,y)$，则有：

$$\frac{x-a}{c-x}=\frac{t}{1-t}\Rightarrow x=(1-t)a+tc\text{\hspace{1em}(3–1)}$$

同理有：

$$\frac{y-b}{d-y}=\frac{t}{1-t}\Rightarrow y=(1-t)b+td\text{\hspace{1em}(3–2)}$$

于是可将$(3-1)(3-2)$简写为：

$$B(t)=(1-t)P_0+t{P}_1,t\in [0,1]\text{\hspace{1em}(3–3)}$$

3.2 二次贝塞尔曲线（二次方公式）

定义：二次贝塞尔曲线的路径由给定点$P_0$、$P_1$、$P_2$的函数$B(t)$给出：
$$B(t)=(1-t{)}^2{P}_0+2t(1-t)P_1+t^2{P}_2,t\in [0,1]$$

假设$P_0{P}_1$上的点为$A$，$P_1{P}_2$上的点为$B$，$AB$上的点为$C$（也即$C$为曲线上的点。则根据一次贝塞尔曲线公式有：

$$\begin{array}{l}A=(1-t)P_0+t{P}_1\\ B=(1-t)P_1+t{P}_2\\ C=(1-t)A+tB\end{array}\text{\hspace{1em}(3–4)}$$

将上式中$A$、$B$带入$C$中，即可得到二次贝塞尔曲线的公式：

$$B(t)=(1-t{)}^2{P}_0+2t(1-t)P_1+t^2{P}_2,t\in [0,1]\text{\hspace{1em}(3–5)}$$

3.3 三次贝塞尔曲线（三次方公式）

同理可得三次贝塞尔曲线公式：

$$B(t)=(1-t{)}^3{P}_0+3t(1-t{)}^2{P}_1+3t^2(1-t)P_2+t^3{P}_3,t\in [0,1]\text{\hspace{1em}(3–6)}$$

3.4 $n$次贝塞尔曲线（一般参数公式）

定义：给定点$P_0,P_1,...,P_n$，则$n$次贝塞尔曲线由下式给出：

$n$次贝塞尔曲线的公式可由如下递归表达：

$$P_0^n=(1-t)P_0^{n-1}+t{P}_1^{n-1},t\in [0,1]\text{\hspace{1em}(3–7)}$$

进一步可以得到贝塞尔曲线的递推计算公式：

$$P_i^k\{\begin{array}{l}{P}_i,k=0\\ (1-t)P_i^{k-1}+t{P}_{i+1}^{k-1},k=1,2,...,n;i=0,1,...,n-k\end{array}$$

这就是德卡斯特里奥算法（De Casteljau’s algorithm）

参考

[1] https://www.jianshu.com/p/0c9b4b681724
[2] https://www.jianshu.com/p/8f82db9556d2

今天的文章贝塞尔曲线（Bezier Curve）原理及公式推导分享到此就结束了，感谢您的阅读。