如果行内公式没渲染请刷新页面

贝塞尔曲线

贝塞尔曲线(Bézier Curve)是一种在计算机图形学,图形设计软件(如 Adobe Illustrator)、动画制作、字体设计等领域中广泛使用的参数曲线,常用于设计平滑的曲线路径。

本文将介绍贝塞尔曲线的基本原理,公式推导。

贝塞尔曲线的基本原理

贝塞尔曲线由一组控制点定义。最常见的是一次、二次和三次贝塞尔曲线。

所以我们只介绍一次、二次和三次贝塞尔曲线。

贝塞尔曲线是通过一组有序控制点定义的参数函数,该函数将参数 t 映射到曲线上的空间点。

一次贝塞尔曲线

在平面中两个点可以确定一条线段,那么我们怎么表示线段上的任意一个点呢?

假设平面中存在任意两个点$\mathbf{P_1},\mathbf{P_2}$(注:这里的点指的是向量)

那么线段$\mathbf{P_2-P_1}$上的任意一个点$\mathbf{P}$的模长应该满足

$$ ||\mathbf{P_1}||\le||\mathbf{P}||\le||\mathbf{P_2}|| $$

且方向与$\mathbf{P_1}$的方向一致

那么$\mathbf{P}$可以由$\mathbf{P_1}$,$\mathbf{P_2-P_1}$和一个参数 $t$ 来决定

$$ \mathbf{P}=\mathbf{P_1}+t(\mathbf{P_2-P_1}),0\le t\le 1 $$

$\mathbf{P_1}$确定初始位置,$t(\mathbf{P_2-P_1})$控制范围

变换一下有

$$ \mathbf{P}=(1-t)\mathbf{P_1}+t\mathbf{P_2},0\le t\le 1 $$

对图形学熟悉的一眼能看出来这个公式是一个线性插值公式,也就是 lerp 表达式

标准lerp表达式为

$$ lerp(a,b,t) = (1-t)a+tb $$

二次贝塞尔曲线

两个点可以确定一个线段,那么三个点就可以确定两个线段,这样我们可以得到两个一次贝塞尔曲线。

假设平面上有三个点$\mathbf{P_1},\mathbf{P_2},\mathbf{P_3}$

那么我们可以的到两个lerp表达式

$$ lerp(\mathbf{P_1},\mathbf{P_2},t),\quad0\le t\le 1 $$

$$ lerp(\mathbf{P_2},\mathbf{P_3},t),\quad0\le t\le 1 $$

给定任意 $t$ 我们可以确定两个点$\mathbf{P_4},\mathbf{P_5}$

当我们 $t$ 取不同的值时$\mathbf{P_4},\mathbf{P_5}$的位置也会随之变化,如果我们将$\mathbf{P_4},\mathbf{P_5}$连接起来我们又会的到一条线段记作 $l$ ,很显然我们又得到一条lerp表达式

$$ lerp(\mathbf{P_4},\mathbf{P_5},t),\quad0\le t\le 1 $$

当我们的 $t$ 从0 到 1 取遍每一个数,那么线段 $l$ 也会随之动起来,当你把所有取不同数得到的 $l$ 画出来你会发现某个点的轨迹是一条曲线。

这个点的轨迹正是(注:$\mathbf{P_4},\mathbf{P_5}$是动点)

$$ lerp(\mathbf{P_4},\mathbf{P_5},t),\quad0\le t\le 1 $$

$$ lerp(lerp(\mathbf{P_1},\mathbf{P_2},t),lerp(\mathbf{P_2},\mathbf{P_3},t),t),\quad0\le t\le 1 $$

我们将表达式写出来

$$ \mathbf{P} = (1-t)[(1-t)\mathbf{P_1}+t\mathbf{P_2}]+t[(1-t)\mathbf{P_2}+t\mathbf{P_3}],\quad0\le t\le 1 $$

化简

$$ \mathbf{P} = (1-t)^2\mathbf{P_1}+2t(1-t)\mathbf{P_2}+t^2\mathbf{P_3},\quad0\le t\le 1 $$

这就是二次贝塞尔曲线

三次贝塞尔曲线

与二次贝塞尔曲线同理,4个点可以确定三条选段,得到三个lerp表达式

,这三个表达式可以确定3个点,这就退化到二次贝塞尔曲线了。

所以通过相同方式的推导我们可以的到三次贝塞尔曲线公式

$$ B(t) = (1-t)^3 P_0 + 3(1-t)^2 t P_1 + 3(1-t) t^2 P_2 + t^3 P_3, \quad t \in [0,1] $$

最后修改:2025 年 08 月 27 日
如果觉得我的文章对你有用,请随意赞赏