浅析iOS中的贝塞尔(Bézier curve)曲线

一：贝塞尔曲线简介

贝塞尔曲线是由法国数学家Pierre Bézier所发明的。贝塞尔曲线是计算机图形图像造型的基本工具，是图形造型运用得最多的基本线条之一。它通过控制曲线上的四个点（起始点、终止点以及两个相互分离的中间点）来创造、编辑图形。其中起重要作用的是位于曲线中央的控制线。这条线是虚拟的，中间与贝塞尔曲线交叉，两端是控制端点。移动两端的端点时贝塞尔曲线改变曲线的曲率（弯曲的程度）；移动中间点（也就是移动虚拟的控制线）时，贝塞尔曲线在起始点和终止点锁定的情况下做均匀移动。

二：常见贝塞尔曲线分类

常见的贝塞尔曲线分为以下几个部分：

• 一阶贝塞尔曲线
  

• 二阶贝塞尔曲线
  

• 三阶贝塞尔曲线
  
  当然，还存在者四阶、五阶甚至n阶。这里不再赘述。

三：贝塞尔曲线的绘制过程

如图所示是在普通直角坐标系（即与中学时数学里直角坐标系一致）里一个简单的三阶贝塞尔曲线。该曲线由四个控制点组成，即P₀，P₁，P₂，P₃这四个控制点组成。下面是其绘制的过程：

• 第一步，连接这四个控制点，组成三条线段。其中，P₀，P₃系起点、终点

• 第二步，取一参数t（t系P₀P’₀ / P₀P₁；P’₀参考上图；t在零到一之间的闭区间上），得到一条位于P₀P₁之间的线段P₀P’₀
• 第三步，根据上一步确定的t，求得位于P₁P₂线段上的P’₁；并重复此步骤，得到位于P₂P₃线段上的P’₂。这样，就得到第一轮的三个新控制点。其中，P’₀与P’₂系起点与终点。
  - 第四步，连接上一步得到的新的三个控制点，即由P’₀、P’₁和P’₂三个控制点组成的两条线段P’₀P’₁和P’₁P’₂。重复第三步，得到第二轮新的两个控制点P’‘₀和P’‘₁，连接P’‘₀和P’‘₁为新的线段P’‘₀P’'₁。根据t的确定值，得到一条线段终点在t(P’‘₀P’'₁)的线段。该线段终点即为t确定时贝塞尔曲线上的某一点。

四：三阶贝塞尔曲线推导

三阶贝塞尔曲线的推导过程可先由一阶至二阶推导而来。下图为一阶贝塞尔曲线的示意图：

可以看到，t从0至1的过程，也就是P₀P₁这条线段不断增长的过程。由几何知识易得如下式子（t仍然属于0到1的闭区间）：

整理可得：

那么对于二阶贝塞尔曲线而言，多了一个点P₂。我们可以这样理解一个二阶贝塞尔曲线：由两个线段P₀P₁、P₁P₂根据t求得P’₀和P’₁两个控制点，那么易得如下式子：

已知二阶贝塞尔曲线由上文可知可被写为如下写法（这个二阶写法是假设已知P’₀和P’₁两个控制点）：

与P’₀和P’₁两个式子联立整理可得如下：

同理三阶贝塞尔可看作已知二阶贝塞尔，整理可得：

五：UIBezierPath类讲解

普通类几乎都有重载构造器，UIBezierPath类也不例外，其重载构造器无外乎就是提供矩形等基础图形的初始化，这里不再赘述。重在在于线的讲解。

• .move(to: CGPoint)
  该方法用以提供一个起点，类型为CGPoint。

• .addLine(to: CGPoint)
  该方法用以提供一个线段，类型为CGPoint。该方法必须再move() 方法之后调用，之后可多次调用。当存在三条及以上的线段时调用close() 方法即绘制封闭平面图图形。

• .addCurve(to: CGPoint, controlPoint1: CGPoint, controlPoint2: CGPoint)
  该方法用以控制曲率。可惜UIBezierPath提供的方法参数仅可生成二阶和三阶贝塞尔曲线。两个controlPoint相同时为二阶贝塞尔曲线，不相同时时为三阶贝塞尔曲线。

六：延申拓展（n阶贝塞尔， de Casteljau算法）

本文主要讲解的是二阶及三阶贝塞尔曲线，实际上还存在着多阶贝塞尔曲线。对应的也有相应的公式。

下面为《3D游戏与计算机图形学中的数学方法》一书中摘券的有关de Casteljau算法章节，有兴趣的读者可深入研究：