4.1.1 贝塞尔曲线的原理

贝塞尔曲线又叫贝济埃曲线,是一种用于二维图形的数学曲线。贝塞尔曲线由节点和线段构成,其中节点是可拖动的支点,而线段仿佛有弹性的牛皮筋。譬如上班族每天两点一线,一个端点是家,另一个端点是单位,那么从家到单位存在一条通勤路线,该路线弯弯曲曲在大街小巷之间穿行。这个上班路线无疑由许多条折线连接而成,既无规律也无美感,无法通过简洁的数学公式来表达。为此法国数学家贝塞尔研究出一种曲线,除了起点和终点之外,不再描绘中间的折线,而是构建一段运输小球的控制线,控制线本身在移动,然后小球随着在控制线上滑动,小球从起点运动到终点的轨迹便形成了贝塞尔曲线。

贝塞尔曲线又分为以下三类曲线:

(1)一次贝塞尔曲线

此时曲线只是一条两点之间的线段,它的函数公式为B(t)=P0+(P1-P0)t=(1-t)P0+tP1,t ∈[0,1]。

(2)二次贝塞尔曲线

此时除了起点和终点,曲线还存在一个控制点,它的函数公式为B(t)=(1-t)2P0+2t(1-t)P1+t2P2,t ∈[0,1]。

二次贝塞尔曲线的小球运动轨迹如图4-1和图4-2所示。图4-1为小球运动到三分之一时的路径曲线,图4-2为小球运动到三分之二时的路径曲线。

图4-1 小球运动到三分之一时的二次曲线

图4-2 小球运动到三分之二时的二次曲线

(3)三次贝塞尔曲线

此时除了起点和终点,曲线还存在两个控制点,它的函数公式为B(t)=P0(1-t)3+3P1t(1-t)2+3P2t2(1-t)+P3t3,t ∈[0,1]。

三次贝塞尔曲线的小球运动轨迹如图4-3和图4-4所示。图4-3为小球运动到三分之一时的路径曲线,图4-4为小球运动到三分之二时的路径曲线。

图4-3 小球运动到三分之一时的三次曲线

图4-4 小球运动到三分之二时的三次曲线

贝塞尔曲线拥有优美的平滑特性,使得它广泛应用于计算机绘图,甚至Android也自带了与之相关的操作方法。这些方法都是由路径工具Path提供的,具体说明如下:

  • moveTo:把画笔移动到指定起点。
  • lineTo:从当前点到目标点画一条直线。
  • quadTo:指定二次贝塞尔曲线的控制点与结束点的绝对坐标,并在当前点到结束点之间绘制贝塞尔曲线。
  • rQuadTo:指定二次贝塞尔曲线的控制点与结束点的相对坐标,并在当前点到结束点之间绘制贝塞尔曲线。
  • cubicTo:指定三次贝塞尔曲线的两个控制点与结束点的绝对坐标,并在当前点到结束点之间绘制贝塞尔曲线。
  • rCubicTo:指定三次贝塞尔曲线的两个控制点与结束点的相对坐标,并在当前点到结束点之间绘制贝塞尔曲线。

注意,quadTo与rQuadTo两个方法的区别在于:前者的坐标参数为绝对坐标,后者的坐标参数为参考当前点偏移的相对坐标。

有了上述的路径方法,开发者无须自己实现贝塞尔曲线的算法,只要调用相关路径方法即可,于是App绘制贝塞尔曲线就简单多了。