贝塞尔曲线
由控制点定义的平滑数学曲线,是字体、矢量图形和动画缓动函数的基础技术。
贝塞尔曲线(Bézier Curve)是由控制点定义的参数化平滑曲线,由法国工程师 Pierre Bézier 在 1960 年代为汽车车身设计而开发。如今它是字体渲染、矢量图形和 CSS 动画的核心数学基础。
按控制点数量分类:
- 二次贝塞尔曲线:3 个控制点(起点、1 个控制点、终点)。TrueType 字体使用此类型,SVG 的
Q命令对应此曲线 - 三次贝塞尔曲线:4 个控制点(起点、2 个控制点、终点)。PostScript/OpenType 字体和 SVG 的
C命令使用此类型。CSScubic-bezier()缓动函数也基于此 - 高阶贝塞尔曲线:5 个以上控制点。实际应用中较少直接使用,通常通过多段低阶曲线拼接实现
De Casteljau 算法通过递归线性插值计算曲线上的点,是数值稳定的标准求值方法。
在图形编辑器中,钢笔工具通过放置锚点和调整控制手柄来绘制贝塞尔曲线。CSS 的 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) 定义了 Material Design 的标准缓动曲线。SVG 路径数据中的 C、S、Q、T 命令均为贝塞尔曲线指令。