androidUI之贝塞尔曲线

     贝塞尔曲线是一种通过很少的控制点能够生成复杂的平滑的曲线,最早是通过一位法国工程师广泛宣传,用来辅助汽车车体的工业设计。目前除了工业领域,在计算机图形学领域,尤其矢量图像中。

    其本质是一种算法,通过这种算法我们可以绘制出其中曲线,贝塞尔曲线分为一阶贝塞尔曲线和多阶贝塞尔曲线。

   一阶贝塞尔曲线-一条直线,共有一个起始点和终点没有控制点

 androidUI之贝塞尔曲线_第1张图片

    二阶贝塞尔曲线,一个起点一个终点,一个控制点,如下图:P0,P2为起点终点,P1为控制点

androidUI之贝塞尔曲线_第2张图片

三阶贝塞尔曲线,一个起点一个终点,两个控制点,其中P1,P2为控制点

androidUI之贝塞尔曲线_第3张图片

四阶段贝塞尔曲线,一个起始点一个终止点,三个控制点,如图:P1,P2,P3为控制点

androidUI之贝塞尔曲线_第4张图片

5阶贝塞尔曲线,一个起点,一个终点,四个控制点

    .....

通过以上我们不难推出如果有N个控制点,那么就是N+1阶贝塞尔曲线

上文说道贝塞尔曲线的本质是一组算法,那么我们就来具体看下是怎么样的算法,为了方便理解我们先用图示来进行说明一下这个曲线到底是如何绘制的。

如下图,需要从点A到C过控制点B 绘制一条曲线

androidUI之贝塞尔曲线_第5张图片

首先我们在AB上任意取一点P,在BC上任意取一点P",使得AP:AB=BP":BC

androidUI之贝塞尔曲线_第6张图片

连接PP”,并在PP"上找到一点O,使得PO:PP"=AP:AB=BP":BC

androidUI之贝塞尔曲线_第7张图片

那么这个点O的就是此时贝塞尔曲线上绘制的一点,将点P不断的向B运动,期间上面点O的连线就是贝塞尔曲线

androidUI之贝塞尔曲线_第8张图片

其实通过上面的图示我们不难看出在画二阶贝塞尔曲线时只是把通过二阶找到一阶,那么绘制三阶也是同理,三阶通过比例画出二阶,二阶通过比例找到一阶,进行绘制。

上面我们通过图示讲解了贝塞尔曲线的绘制原理,前面我们也说了贝塞尔的实质上是一种算法,其最终的公式为

刚开始看到这个公式我也是一知半解,然后静下心来推到了一下就能明白,下图是我推导的过程(字很尴尬,数学渣渣,如果有理解错了的地方希望能够帮助我指出来)

其实这个公式的推导只是为了方便我们理解这个计算原理,我们通过推导可以发现,无论我们是几阶的贝塞尔曲线,我们都是一个往下降阶的过程,不断降阶直到找到一阶,而我们绘制的点也是始终在这个一阶上的,在我们一阶上我们的公式是:

P0*(1-t)+tP1,其实这个在程序中的表现就是一种递归思想,而这个递归的边界就是阶数为1时返回它的比例点:

fx=x0*(1-t)+t*x1

fy=y0*(1-t)+t*y1

通过以上的讲解,我们能知道贝塞尔曲线的算法规则,就可以实现很多的效果,如:垃圾桶的开关盖,QQ气泡等。在下一篇我们会继续讲解绘制线段曲线的好伴侣Path,以及他和贝塞尔的之间的应用

 

 

你可能感兴趣的:(Android,移动开发,android,贝塞尔曲线)