从暴露年龄的屏保说起-贝塞尔曲线(附Demo)

这个屏保很多90后的朋友可能没见过，当年在windows刚普及不久的时候，很多人的电脑上的屏幕保护程序就是这个。
印象这个屏保叫贝塞尔曲线，其中的每一条线都是一条贝塞尔曲线。
贝塞尔曲线就是今天的主题。
Android中很多地方都用到了贝塞尔曲线，像下面这个水波纹效果就是用贝塞尔曲线做的。

什么是贝塞尔曲线

Bezier curve(贝塞尔曲线)是一种用数学描述任意曲线的方法。
它用不同的阶来描述曲线的复杂度，从一阶到高阶都有。
简单的说贝塞尔曲线由起点+终点+控制点组成，
一阶贝塞尔就是一条直线，二阶贝塞尔有起点终点和一个控制点组成，三阶则有两个控制点。
下面是一条二阶贝塞尔，B点就是控制点了。

贝塞尔曲线的原理

一条二阶贝塞尔曲线在起点，结束点，控制点都确定的情况下也就能确定了，
不感兴趣的朋友可以跳过这一段对原理的解释，
不看原理也没关系，因为对于 Android来说我们只需要知道这三个点，就能通过Path.cubicTo这个方法绘制出一跳贝塞尔曲线。

下面对原理解释一下，
一跳曲线是由多个点连接起来的，绘制曲线的过程就是找这些点并连接起来的过程。
以A为起点，C为终点，B为控制点的话，要找绘制点，首先从A到B中间随意找一个点D，

A到D的距离和A到B的距离记百分比 P = AD : AB，

B到C上以 P 为同样的百分比找出点 E， BE : BC 应该和 AD : AB 相等，

然后连接DE，在DE上同样找到点F，满足条件 DF : DE = AD : AB = BE : BC = P，

这样就找到了会致点F。

在B点不动的情况下不断的移动D点，我们就可以得到从A到C的贝塞尔曲线了。
如果想象不出来的话可以看wiki上的这个图，

Android实现

在Android上的实现非常简单，Path类已经帮我们完成了计算的过程，
它提供了几个方法分别用来描述贝塞尔曲线，对于二阶曲线来说用的是quadTo方法，三阶是cubicTo。
以二阶为例，

Path path = new Path();
path.moveTo(start.x, start.y);
path.quadTo(control1.x, control1.y, end.x, end.y);

这样就完成了一条二阶贝塞尔曲线的path，之后用 canvas.drawPath就可以画出来了。
效果图如下

如果想要源码的话在公众号回复”贝塞尔”就可以啦。