上一篇我们说了 Path 的基本操作,这一篇让我们来说一下 Path 的进阶用法——贝塞尔曲线。
那什么是贝塞尔曲线?贝塞尔曲线能在 Android 中实现什么效果?以及如何做到的?这篇文章都会告诉你。
什么是贝塞尔曲线?
贝塞尔曲线是由皮埃尔·贝塞尔发表的,他主要应用于汽车的主体进行设计,后来成为计算机图形学相当重要的参数曲线。
贝塞尔曲线由什么组成的?它通常由数据点和控制点两个部分组成的。那什么是数据点和控制点呢?请看下表:
类型 | 作用 |
---|---|
数据点 | 曲线的起点和终点 |
控制点 | 控制曲线的弯曲程度 |
这样听起来可能还有点抽象,我们直接上图来看看。
一阶贝塞尔曲线:
一阶贝塞尔曲线其实就是一条直线,没有控制点,只有数据点 P0,P1,如下图:
Android提供方法:lineTo()
二阶贝塞尔曲线:
二阶贝塞尔曲线有一个控制点 P1 和两个数据点 P0,P2。如下图:
Android 提供方法:quadTo()
三阶贝塞尔曲线:
三阶贝塞尔曲线有两个控制点 P1,P2 和两个数据点 P0,P3。如下图:
Android 提供方法:cubicTo()
更高阶的曲线 Android 并没有提供 API ,所以在这只会介绍二阶和三阶曲线,如果对更高阶的曲线有兴趣的话,可以去贝塞尔曲线———维基百科和贝塞尔曲线动态演示这两个网站多了解一下。
贝塞尔曲线是怎么形成的
那么这条曲线究竟是怎么形成的呢?先从二阶曲线分析一下:
二阶贝塞尔曲线形成原理:
1.连接 A,B 形成 AB 线段,连接 B,C 形成 BC 线段。
2.在 AB 线段取一个点 D,BC 线段取一个点 E ,使其满足条件: AD/AB = BC/BE,连接 D,E 形成线段 DE。
3.在 DE 取一个点 F,使其满足条件:AD/AB = BC/BE = DF/DE。
4.而满足这些条件的所有的F点所形成的轨迹就是二阶贝塞尔曲线,动态过程如下:
三阶贝塞尔曲线形成原理:
1.连接 A,B 形成 AB 线段,连接 B,C 形成 BC 线段,连接 C,D 形成 CD 线段。
2.在AB线段取一个点 E,BC 线段取一个点 F,CD 线段取一个点 G,使其满足条件: AE/AB = BF/BE = CG/CD。连接 E,F 形成线段 EF,连接 F,G 形成线段 FG。
3.在EF线段取一个点 H,FG 线段取一个点 I,使其满足条件: AE/AB = BF/BE = CG/CD = EH/EF = FI/FG。连接 H,I 形成线段 HI。
4.在 HI 线段取一个点 J,使其满足条件: AE/AB = BF/BE = CG/CD = EH/EF = FI/FG = HJ/HI。
5.而满足这些条件的所有的J点所形成的轨迹就是三阶贝塞尔曲线,动态过程如下:
在 Android 中使用贝塞尔曲线
说了这么多原理,是时候要知道要怎么运用贝塞尔曲线了。这里我会用两个例子来说明二阶和三阶贝塞尔曲线的运用:
二阶曲贝塞尔曲线的应用:
方法预览:
public void quadTo (float x1, float y1, float x2, float y2)
有什么用:
画出二阶贝塞尔曲线
怎么用:
因为二阶贝塞尔曲线需要三个点才能确定,所以quadTo方法中的四个参数分别是确定第二,第三的点的。第一个点就是path上次操作的点。
现在用一个实例来练习下这个方法: