› 贝兹曲线模拟器 返回
数值分析

贝兹曲线模拟器

通过少数几个控制点来"造型"光滑曲线的贝兹曲线交互式体验工具。移动控制点 P1·P2 时，曲线的形状、参数 t 处的点、切线、曲率实时变化，可直观理解支撑字体、CAD、动画的计算几何基础。

参数设置
曲线次数
3次为4个控制点，2次为3个控制点
控制点 P1 的 x 坐标
控制点 P1 的 y 坐标
控制点 P2 的 x 坐标
2次曲线不使用此项
控制点 P2 的 y 坐标
2次曲线不使用此项
参数 t
评价曲线的位置（0=起点，1=终点）
计算结果
—
B(t) 的 x 坐标
—
B(t) 的 y 坐标
—
曲线长（近似）
—
t 处的切线方向 (°)
—
t 处的曲率 κ
—
控制多边形的长度
—
贝兹曲线与 De Casteljau 构造 — 动画

绘制控制点（点）与控制多边形（细线）、贝兹曲线（粗线）。参数 t 从 0→1 扫过，De Casteljau 的内分线和点 B(t) 沿着曲线移动。

坐标 vs 参数 t
曲率 κ vs 参数 t
理论·主要公式

$$B(t)=\sum_{i=0}^{n}\binom{n}{i}(1-t)^{n-i}t^{i}\,P_i$$

n 次贝兹曲线。由伯恩斯坦基函数的加权和表示，t 在 0～1 范围变化。权重之和始终为 1。

$$B(t)=(1-t)^3P_0+3(1-t)^2t\,P_1+3(1-t)t^2P_2+t^3P_3$$

3次贝兹曲线（4个控制点）的展开式。曲线严格插值端点 P0·P3，受内部控制点 P1·P2 的牵引。

$$\kappa=\frac{|B'_x B''_y - B'_y B''_x|}{(B'^2_x+B'^2_y)^{3/2}}$$

参数化曲线的曲率 κ。B'·B'' 为一阶和二阶导数。切线方向角由 atan2(B'y, B'x) 求得。

什么是贝兹曲线

🙋
"贝兹曲线"就是 Illustrator 钢笔工具点连点然后弯曲那个吧？那条曲线在数学上到底是什么呢？
🎓
对，钢笔工具的正体就是贝兹曲线。简单说就是"用少数几个控制点来确定形状的光滑曲线"。看左边的画布。两端的点 P0 和 P3 是固定的，你能动的是中间的 P1 和 P2。曲线一定从 P0 开始在 P3 结束。但有意思的是，中间的 P1·P2 不是曲线"通过"的点，而是曲线"被拉向"的点。
🙋
啊，不通过啊？我看 P1 动的时候曲线也跟着动，我还以为是通过的呢…
🎓
这就是贝兹的妙处了。看公式 B(t)=(1−t)³P0+3(1−t)²t·P1+3(1−t)t²P2+t³P3，每个控制点都带着"权重"。在 t=0 时 (1−t)³ 是1其他全是0，所以 B(0)=P0。t=1 时 t³ 是1，所以 B(1)=P3。但中间的 t 时4个点的权重都混在一起，所以不会正好在 P1 或 P2。就像引力一样。P1 往上移曲线就往上弯，对吧？
🙋
明白了！那"参数 t"这个滑块是什么意思？我看曲线上的点在动。
🎓
t 表示"沿曲线走了多远"，是 0～1 的数。t=0 是起点，t=1 是终点，t=0.5 差不多在中间。不过 t=0.5 不一定是"曲线长的一半"——控制点的位置会改变推进速度。画布上那些细内分线就是"De Casteljau 算法"的构造线，重复线性插值3次就能算出 B(t)。这是稳定计算贝兹曲线的标准方法。
🙋
只用线性插值重复一下就能出现弯曲的线，太神奇了…。还有结果里的"曲率"，这个有什么用吗？
🎓
曲率 κ 表示"那个点处曲线拐得有多急"。κ 越大拐得越急，κ=0 就是直线。实际应用中这个很有用，比如汽车车身曲面和字体轮廓。曲率如果突然变化，光的反射会卡顿，看起来很"廉价"。设计师会调整控制点让曲率平滑连接。下面的"曲率 vs t"图，你移动控制点时能看到曲线光滑地画出山形。
🙋
还有"3次"和"2次"的切换。这俩有什么区别吗？
🎓
2次贝兹有3个控制点（P0·P1·P3），中间只有1个控制点。3次有4个，2个。控制点越多形状自由度越高——3次的话能做出 S 型弯，中间拐向改变，但2次基本只能朝一个方向凸。实际应用中 TrueType 字体用轻量级的2次贝兹，PostScript 和 OpenType 的 CFF 轮廓用表现力强的3次贝兹，各取所需。

常见问题

否。贝兹曲线必然通过的仅为首尾控制点（端点）。3次贝兹情形下，B(0)=P0、B(1)=P3。中间的控制点 P1·P2 起"牵引"作用，曲线本身并不通过它们。但曲线必然位于所有控制点凸包的内部。在 t=0 时端点的权重 (1−t)³ 为1而其余为0，在 t=1 时 t³ 为1，因此仅端点得到严格插值。
De Casteljau 算法是通过"重复线性插值"稳定地求贝兹曲线上的点 B(t) 的方法。将相邻的控制点对按比例 t 内分，生成新的点列——反复此过程直到仅剩一个点，该点即为 B(t)。3次贝兹情形下为4点→3点→2点→1点共3层收敛。相比直接计算伯恩斯坦多项式，此法在数值上更稳定，且可直接用于曲线的 t 处分割，因此在图形学和 CAD 中是标准方法。本工具的画布直接绘制了这些构造线。
切线方向由一阶导数 B'(t) 得出。对3次情形，B'(t)=3(1−t)²(P1−P0)+6(1−t)t(P2−P1)+3t²(P3−P2)，方向角为 atan2(B'y, B'x)。曲率 κ 由一阶和二阶导数计算得 κ=|B'x·B''y − B'y·B''x| / (B'x²+B'y²)^1.5。当分母 (B'x²+B'y²) 接近0时曲率会发散，本工具以微小值保护分母以防止 NaN。曲线长通过在 t 处约200个点采样，累加微小弦长来近似。
贝兹曲线是矢量图形的通用语言。TrueType 字体采用2次贝兹、PostScript/OpenType 的 CFF 轮廓采用3次贝兹定义所有文字轮廓。Illustrator 和 Inkscape 的钢笔工具、SVG 的 path 元素、动画的运动路径、CAD 的自由曲线·自由曲面（贝兹曲面·NURBS 的基础）都以贝兹曲线为基础。控制点的移动使曲线直观且可预测地变化，曲线位于凸包内且数值稳定，这是贝兹曲线应用如此广泛的原因。

实际应用

字体与排版：屏幕和纸张上显示的所有文字轮廓都由贝兹曲线定义。TrueType 字体（.ttf）采用计算轻量的2次贝兹，PostScript Type 1 和 OpenType 的 CFF 轮廓采用表现力强的3次贝兹。字体设计师对每个字符调整数十条贝兹段的控制点，确保任何放大倍率下都能保持光滑曲线。结合 Hinting，在少量像素下文字也不会花掉。

矢量绘图与设计工具：Illustrator·Inkscape·Figma 的钢笔工具、SVG 的 path 元素都采用贝兹曲线。与栅格图像不同，贝兹绘制的图形无论如何放大都不会降质。标志、图标、地图等需要在任何分辨率下都清晰的图形，内部以贝兹曲线控制点坐标的形式保存。

CAD 与曲面建模：汽车车身、飞机外壳、家电外壳等自由曲面采用贝兹曲线在两个方向拓展的贝兹曲面，以及更一般化的 NURBS（非均匀有理 B 样条）建模。本工具涉及的曲率概念是评估曲面"光反射美观度（A 类曲面）"的基础。曲率不连续会导致反光高光卡顿，损害产品质感。

动画与运动设计：角色和摄像机运动路径（运动路径），以及时间内变化的缓动曲线都用贝兹曲线表示。CSS 的 cubic-bezier() 函数、After Effects·Blender 的图表编辑器，正是通过编辑3次贝兹控制点来创造"缓开快结束"等运动质感的机制。

常见误解与注意事项

最常见的误解是"混淆控制点与曲线上的点"。如前所述，贝兹曲线严格通过的仅是端点控制点，内部控制点 P1·P2 仅起牵引作用。还有"参数 t"与"沿曲线的距离（弧长）"容易混淆。t=0.5 是权重分配上的中点，并非曲线长度的中点。控制点偏向一侧时，t 等间隔但曲线上的点不均匀分布。想在路径上均匀打点（如等速动画）需要"弧长参数化"重新计算参数。

其次，"提高次数就能自由弯曲"的误解。确实控制点多了表现力强，但5次以上的高次贝兹移动一个控制点时整条曲线都会动，局部编辑困难。高次多项式数值上易振荡不稳定。所以实务采用多条3次贝兹段连接的"贝兹样条"。Illustrator 的路径内部也是3次贝兹段的序列。相邻段的切线方向（C1 连续）甚至曲率（C2 连续）一致是光滑外观的关键。

最后是"曲率处处有限"的思维定势。曲率公式 κ=|B'x·B''y − B'y·B''x| / (B'x²+B'y²)^1.5 中，分母 (B'x²+B'y²)（速度平方）为0时曲率发散。这发生在控制点配置使切线为零向量的"尖点"处，比如3次贝兹的 P1、P2 极端偏向端点时曲线会折回变尖。数值计算需要对分母进行保护否则会产生 NaN 或 Infinity。本工具已进行分母保护，任何位置包括 t=0·t=1 都不会出现值的崩溃。曲线设计时应通过曲率图检查是否意外出现了尖点。

使用指南

  1. 在控制点坐标输入栏中设置 P0、P1、P2。比如2次贝兹曲线，设 P0=(0,0)、P1=(50,100)、P2=(100,0)。
  2. 将参数 t 滑块从0变化到1，De Casteljau 构造的动画会播放，中间点的线性插值过程被可视化。
  3. 每个 t 值处的曲线上的点 B(t) 坐标、切线方向（度数制）、曲率 κ、曲线长（高斯积分近似）实时输出。

具体计算示例

2次贝兹曲线，P0=(0,0)、P1=(40,80)、P2=(80,20)，t=0.5 时的计算结果如下。通过 De Casteljau 算法得到中间点 Q0=(20,40)、Q1=(60,50)，进而得 R=(40,45)。此点的切线方向约为 26.6°，曲率 κ≈0.0125(1/px)，全曲线长约 96.5px。控制多边形的长度为 |P0P1|+|P1P2|≈122.1px。

实务中的注意事项

  1. 3次贝兹曲线（4个控制点）的 De Casteljau 构造有3层，t=0.5 的计算比2次更复杂。CAD 设计中评估曲线光滑度时，要确认 κ 值连续。
  2. 曲线长的近似精度取决于采样点数。若需高精度（如 NC 加工的路径长计算），应增加分割数或配合外部数值积分工具。
  3. 切线方向的不连续性是曲线设计不当的信号。尤其在机器人路径规划和字体设计中，应调整控制点位置确保切线变化光滑。