本篇文章我们来说说贝塞尔曲线,贝塞尔曲线是计算机图形学中最重要的曲线之一。Canvas技术中能绘制的贝塞尔曲线主要有一次贝塞尔曲线、二次贝塞尔曲线和三次贝塞尔曲线。通俗而言,一次贝塞尔曲线就是一条直的线段,所以就是使用以前说过的lineTo()方法来绘制,而二次贝塞尔曲线和三次贝塞尔曲线都是由起点、控制点和终点构成的,它们的区别就是前者只有一个控制点,后者有两个控制点。

简而言之,一次、二次、三次贝塞尔曲线都是由起点、控制点和终点构成的,区别就在于一次的只有0个控制点、二次的有1个控制点、三次的有2个控制点,贝塞尔曲线由数学公式给出,所以为了方便理解,我们从一次开始讲。

I. 一次贝塞尔曲线

它的函数式为:




java 贝塞尔曲线 代码实现 canvas 贝塞尔曲线_java 贝塞尔曲线 代码实现


其中B(t)是关于t的函数,代表曲线上的每一个点的坐标,P0是指曲线的起点,P1是指曲线的终点。显然,确定起点和终点后,P0和P1是常量,因此B(t)是一个一次函数,所以称为一次贝塞尔曲线。B(t)代表曲线上的点。t=0时,B(t)就是曲线的起点,t=1时,就是曲线的终点。

我们可以来计算一下,点的坐标可以使用二位行向量来进行表示,那么假设P0=(0,0)、P1=(0,30),那么这条曲线就是一条线段。(注:由于乘法符号比较难打,所以下面使用*代表乘号)

当t=0时,B(t)=(1-0)*(0,0)+0*(0,30)=(0,0)+(0,0)=(0,0),的确是起点

当t=1时,B(t)=(1-1)*(0,0)+1*(0,30)=(0,0)+(0,30)=(0,30),的确是终点

当t=0.5时,B(t)=(1-0.5)*(0,0)+0.5*(0,30)=(0,0)+(0,15)=(0,15),的确在这条直线上。

二次和三次的也是类似于这样计算,只是它们的函数不一样而已。贝塞尔曲线就是由函数确定的每一个点构成的。至于为什么能够这么算,请参阅《线性代数》向量一章。

II.二次贝塞尔曲线

二次贝塞尔曲线由以下公式给出:


java 贝塞尔曲线 代码实现 canvas 贝塞尔曲线_函数式_02


其中,P0是曲线的起点、P1是曲线的控制点、P2是曲线的终点。由于它是一个二次函数,所以它的图像是一条抛物线

二次贝塞尔曲线可以使用上下文对象的quadraticCurveTo() 方法绘制,它有四个参数分别是控制点和终点的坐标,使用moveTo()方法指定曲线的起点。同理,当曲线的起点、终点和控制点确定之后,就可以通过上述函数式计算出曲线上的每一个点的坐标。

需要注意的是,贝塞尔曲线也属于路径,所以也需要使用stroke()方法绘制。

III.三次贝塞尔曲线

三次贝塞尔曲线由以下公式给出:


java 贝塞尔曲线 代码实现 canvas 贝塞尔曲线_canvas贝塞尔曲线爱心_03


式中的P0是起点、P3是终点,P1和P2是第一个控制点和第二个控制点。三次贝塞尔曲线使用上下文对象的bezierCurveTo()方法绘制,它共有六个参数,分别是第一个控制点、第二个控制点和终点的坐标。同样地,曲线的起点在这之前使用moveTo()方法来确定。