文章目录
二次贝塞尔曲线（Quadratic Bézier Curve）和三次贝塞尔曲线（Cubic Bézier Curve）是两种常见的 贝塞尔曲线，广泛应用于图形绘制、动画轨迹、字体轮廓等领域。它们都是通过一组控制点生成的平滑曲线。
一、二次贝塞尔曲线（Quadratic Bézier Curve）
控制点数量：3 个点
- 起点 P 0 P_0 P0
- 控制点 P 1 P_1 P1（决定曲线的弯曲方向和程度）
- 终点 P 2 P_2 P2
数学公式
B ( t ) = ( 1 − t ) 2 P 0 + 2 ( 1 − t ) t P 1 + t 2 P 2 , t ∈ [ 0 , 1 ] B(t) = (1 - t)^2 P_0 + 2(1 - t)t P_1 + t^2 P_2, \quad t \in [0, 1] B(t)=(1−t)2P0+2(1−t)tP1+t2P2,t∈[0,1]
特点
- 仅一个控制点
- 曲线位于 P 0 P_0 P0 和 P 2 P_2 P2 之间，并向 P 1 P_1 P1 弯曲
- 相对简单，适合控制较简单的弯曲轨迹
二、三次贝塞尔曲线（Cubic Bézier Curve）
控制点数量：4 个点
- 起点 P 0 P_0 P0
- 第一个控制点 P 1 P_1 P1
- 第二个控制点 P 2 P_2 P2
- 终点 P 3 P_3 P3
数学公式
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 , t ∈ [ 0 , 1 ] 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] B(t)=(1−t)3P0+3(1−t)2tP1+3(1−t)t2P2+t3P3,t∈[0,1]
特点
- 两个控制点，控制力更强，可以形成更复杂的弯曲
- 是矢量图形（如 SVG、字体）中最常用的贝塞尔类型
三、对比总结
| 特性 | 二次贝塞尔曲线 | 三次贝塞尔曲线 |
|---|---|---|
| 控制点个数 | 3 | 4 |
| 曲线自由度 | 一般 | 更高 |
| 常用场景 | 简单路径、动画 | 字体、矢量绘图 |
| 复杂度 | 低 | 高 |
| 表达能力 | 中 | 强 |
可视化示意（可参考）
二次： P0 -----> P1 -----> P2
三次： P0 -> P1 ... P2 -> P3
应用举例
-
SVG路径：
- 二次：
<path d="M P0 Q P1 P2" /> - 三次：
<path d="M P0 C P1 P2 P3" />
- 二次：
-
CSS 动画：
cubic-bezier(x1, y1, x2, y2)用的是三次贝塞尔曲线
扫一扫
3634
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
