2016-04-11 12:52:39 +08:00
|
|
|
|
# Path之贝塞尔曲线
|
2016-04-11 13:04:05 +08:00
|
|
|
|
|
2016-04-18 19:52:45 +08:00
|
|
|
|
### 作者微博: [@GcsSloop](http://weibo.com/GcsSloop)
|
2016-04-12 22:15:04 +08:00
|
|
|
|
### [【本系列相关文章】](https://github.com/GcsSloop/AndroidNote/tree/master/CustomView)
|
|
|
|
|
|
|
2016-04-13 21:27:10 +08:00
|
|
|
|
在上一篇文章[Path之基本图形](https://github.com/GcsSloop/AndroidNote/blob/master/CustomView/Advance/%5B5%5DPath_BasicGraphics.md)中我们了解了Path的基本使用方法,本次了解Path中非常重要的内容-贝塞尔曲线。
|
2016-04-11 13:04:05 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
******
|
|
|
|
|
|
|
|
|
|
|
|
# 一.Path常用方法表
|
|
|
|
|
|
> 为了兼容性(_偷懒_) 本表格中去除了在API21(即安卓版本5.0)以上才添加的方法。忍不住吐槽一下,为啥看起来有些顺手就能写的重载方法要等到API21才添加上啊。宝宝此刻内心也是崩溃的。
|
|
|
|
|
|
|
|
|
|
|
|
作用 | 相关方法 | 备注
|
|
|
|
|
|
--- | --- | ---
|
|
|
|
|
|
移动起点 | moveTo | 移动下一次操作的起点位置
|
|
|
|
|
|
设置终点 | setLastPoint | 重置当前path中最后一个点位置,如果在绘制之前调用,效果和moveTo相同
|
|
|
|
|
|
连接直线 | lineTo | 添加上一个点到当前点之间的直线到Path
|
|
|
|
|
|
闭合路径 | close | 连接第一个点连接到最后一个点,形成一个闭合区域
|
|
|
|
|
|
添加内容 | addRect, addRoundRect, addOval, addCircle, addPath, addArc, arcTo | 添加(矩形, 圆角矩形, 椭圆, 圆, 路径, 圆弧) 到当前Path (注意addArc和arcTo的区别)
|
|
|
|
|
|
是否为空 | isEmpty | 判断Path是否为空
|
|
|
|
|
|
是否为矩形 | isRect | 判断path是否是一个矩形
|
|
|
|
|
|
替换路径 | set | 用新的路径替换到当前路径所有内容
|
|
|
|
|
|
偏移路径 | offset | 对当前路径之前的操作进行偏移(不会影响之后的操作)
|
|
|
|
|
|
贝塞尔曲线 | quadTo, cubicTo | 分别为二次和三次贝塞尔曲线的方法
|
|
|
|
|
|
rXxx方法 | rMoveTo, rLineTo, rQuadTo, rCubicTo | **不带r的方法是基于原点的坐标系(偏移量),rXxx方法是基于当前点坐标系(偏移量)**
|
|
|
|
|
|
填充模式 | setFillType, getFillType, isInverseFillType, toggleInverseFillType| 设置,获取,判断和切换填充模式
|
|
|
|
|
|
提示方法 | incReserve | 提示Path还有多少个点等待加入**(这个方法貌似会让Path优化存储结构)**
|
|
|
|
|
|
布尔操作(API19) | op | 对两个Path进行布尔运算(即取交集、并集等操作)
|
|
|
|
|
|
计算边界 | computeBounds | 计算Path的边界
|
|
|
|
|
|
重置路径 | reset, rewind | 清除Path中的内容(**reset相当于重置到new Path阶段,rewind会保留Path的数据结构**)
|
|
|
|
|
|
矩阵操作 | transform | 矩阵变换
|
|
|
|
|
|
|
|
|
|
|
|
# 二.Path详解
|
|
|
|
|
|
|
2016-04-15 01:11:17 +08:00
|
|
|
|
上一次除了一些常用函数之外,讲解的基本上都是直线,本次需要了解其中的曲线部分,说到曲线,就不得不提大名鼎鼎的贝塞尔曲线。它的发明者是下面这个人(法国数学家PierreBézier)。
|
2016-04-11 13:04:05 +08:00
|
|
|
|
|
|
|
|
|
|

|
|
|
|
|
|
|
|
|
|
|
|
## 贝塞尔曲线能干什么?
|
|
|
|
|
|
|
|
|
|
|
|
贝塞尔曲线的运用是十分广泛的,可以说**贝塞尔曲线奠定了计算机绘图的基础(_因为它可以将任何复杂的图形用精确的数学语言进行描述_)**,在你不经意间就已经使用过它了。
|
|
|
|
|
|
|
2016-04-15 20:07:33 +08:00
|
|
|
|
你会使用Photoshop的话,你可能会注意到里面有一个**钢笔工具**,这个钢笔工具核心就是贝塞尔曲线。
|
2016-04-11 13:04:05 +08:00
|
|
|
|
|
|
|
|
|
|
你说你不会PS? 没关系,你如果看过前面的文章或者用过2D绘图,肯定绘制过圆,圆弧,圆角矩形等这些东西。这里面的圆弧部分全部都是贝塞尔曲线的运用。
|
|
|
|
|
|
|
2016-04-15 20:07:33 +08:00
|
|
|
|
#### 贝塞尔曲线作用十分广泛,简单举几个的栗子:
|
2016-04-18 21:07:06 +08:00
|
|
|
|
> * QQ小红点拖拽效果
|
|
|
|
|
|
* 一些炫酷的下拉刷新控件
|
|
|
|
|
|
* 阅读软件的翻书效果
|
|
|
|
|
|
* 一些平滑的折线图的制作
|
2016-04-20 21:59:21 +08:00
|
|
|
|
* 很多炫酷的动画效果
|
2016-04-11 13:04:05 +08:00
|
|
|
|
|
|
|
|
|
|
|
2016-04-15 20:07:33 +08:00
|
|
|
|
## 如何轻松入门贝塞尔曲线
|
2016-04-11 13:04:05 +08:00
|
|
|
|
|
2016-04-18 19:52:45 +08:00
|
|
|
|
虽然贝塞尔曲线用途非常广泛,然而目前貌似并没有适合的中文教程,能够搜索出来Android关于贝塞尔曲线的中文文章基本可以分为以下几种:
|
|
|
|
|
|
* 科普型(只是让人了解贝塞尔,并没有实质性的内容)
|
|
|
|
|
|
* 装逼型(摆出来一大堆公式,引用一堆英文原文)
|
|
|
|
|
|
* 基础型(仅仅是讲解贝塞尔曲线的两个函数用法)
|
|
|
|
|
|
* 实战型(根据实例讲解其中贝塞尔曲线的运用)
|
|
|
|
|
|
|
|
|
|
|
|
以上几种类型中比较有用的就是基础型和实战型,但两者各有不足,本文会综合两者内容,从零开始学习贝塞尔曲线。
|
2016-04-11 13:04:05 +08:00
|
|
|
|
|
2016-04-19 00:56:08 +08:00
|
|
|
|
### 第一步.理解贝塞尔曲线的原理
|
|
|
|
|
|
|
2016-04-22 18:55:59 +08:00
|
|
|
|
此处理解贝塞尔曲线并非是学会公式的推倒过程,而是要了解贝塞尔曲线是如何生成的。贝塞尔曲线是用一系列点来控制曲线状态的,我将这些点简单分为两类:
|
|
|
|
|
|
|
|
|
|
|
|
类型 | 作用
|
|
|
|
|
|
-------|------
|
|
|
|
|
|
数据点 | 确定曲线的起始和结束位置
|
|
|
|
|
|
控制点 | 确定曲线的弯曲程度
|
|
|
|
|
|
|
|
|
|
|
|
> 此处暂时仅作了解概念,接下来就会讲解其中详细的含义。
|
2016-04-20 13:45:01 +08:00
|
|
|
|
|
|
|
|
|
|
**一阶曲线原理:**
|
|
|
|
|
|
|
2016-04-22 18:55:59 +08:00
|
|
|
|
一阶曲线最终效果一个线段,对于一阶曲线而言是没有控制点的,仅有两个数据点。
|
|
|
|
|
|
|
|
|
|
|
|

|
|
|
|
|
|
|
|
|
|
|
|
其实就是前面讲解过的lineTo,效果图可以参照上面表格。
|
2016-04-11 13:04:05 +08:00
|
|
|
|
|
2016-04-19 01:40:36 +08:00
|
|
|
|
**二阶曲线原理:**
|
|
|
|
|
|
|
|
|
|
|
|
* 1.控制点
|
|
|
|
|
|
|
|
|
|
|
|
如图所示,图中有ABC三个点,其中AB为曲线的数据点(锚点),C为控制点(控点)。
|
|
|
|
|
|
|
2016-04-22 18:55:59 +08:00
|
|
|
|
|
2016-04-20 22:25:03 +08:00
|
|
|
|
|
2016-04-19 01:40:36 +08:00
|
|
|
|
|
2016-04-11 13:04:05 +08:00
|
|
|
|
|
2016-04-15 20:07:33 +08:00
|
|
|
|
## 三.总结
|
2016-04-11 13:04:05 +08:00
|
|
|
|
|
2016-04-15 20:07:33 +08:00
|
|
|
|
## 参考资料
|