帮助大家理解贝赛尔曲线(Bézier curve)

本文摘自 勾三股四 更早时期的 不老歌 博客。

在包括Photoshop钢笔工具在内的很多绘图软件里,大家会发现一般的曲线都可以通过对几个结点的拖拽完成修改,曲线的两端有两个端点,拖拽端点,就会改变曲线的起始点和结束点;两个端点周围又各自延伸出一个控制点,通过一条辅助的直线段和端点连接起来。拖拽两个控制点,曲线的弯曲度就会发生改变。总体感觉有点像织毛衣:一条弯曲的毛线,毛线两端有两根毛线针,呵呵。



这可能是大家对曲线直观的感觉吧,但其实这四个点构成的曲线就是一条三维贝塞尔曲线

百科中对它的介绍比较抽象,不过我喜欢用数据和公式来说话:
首先n维贝塞尔曲线的公式为:

    n
x = ∑ C(n,i) * t^i * (1-t)^(n-i) * xi
 0<i<1

    n
y = ∑ C(n,i) * t^i * (1-t)^(n-i) * yi
 0<i<1
如果到我们这里的三维贝赛尔曲线,那就是:
x = C(3,0) * (1-t)^3 * x0 +
    C(3,1) * t * (1-t)^2 * x1 +
    C(3,2) * t^2 * (1-t) * x2 +
    C(3,3) * t^3 * x3
  = (1-t)^3 * x0 +
    3t(1-t)^2 * x1 +
    3t^2(1-t) * x2 +
    t^3 * x3
  = x0 (1-t)^3 + 3 x1 t(1-t)^2 + 3 x2 t^2(1-t) + x3 t^3
y = y0 (1-t)^3 + 3 y1 t(1-t)^2 + 3 y2 t^2(1-t) + y3 t^3
举个例子,如果起始点为(0,0),结束点为(2,0),两个控制点分别为(0,1)和(2,1),那么x0~x3分别为0,0,2,2,y0~y3分别为0,1,1,0。上面的公式就变为:
x = 0 + 0          + 6 t^2(1-t) + 2 t^3
y = 0 + 3 t(1-t)^2 + 3 t^2(1-t) + 0
这就是通过4个结点得到的贝塞尔曲线的二元参数方程式。
在实际应用中,我个人接触到的方程示意比较少,基本都是大家通过可视化的作图工具将曲线调整出理想的结果,然后再记录或推断出端点、控制点的坐标的。这里仅供了解理论知识。

向本文提出修改或勘误建议