帮助大家理解贝赛尔曲线(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个结点得到的贝塞尔曲线的二元参数方程式。
在实际应用中，我个人接触到的方程示意比较少，基本都是大家通过可视化的作图工具将曲线调整出理想的结果，然后再记录或推断出端点、控制点的坐标的。这里仅供了解理论知识。