iOS开发 - 第02篇 - UI进阶 - 12 - Quartz2D演练

1、图片水印

2、图片裁剪 --- 头像

3、屏幕截图

注：以上方法均是返回一个UIImage，可将方法添加到一个UIImage分类中。

4、手势解锁 --- 重要

4.1 界面

源代码下载地址：点击打开链接

4.2 实现思路

1> 背景UIImageView

2> 自定义一个UILockView，专门用于封装解锁界面，以后直接用即可

3> 增加按钮，九宫格布局

注1：位置布局放在layoutSubviews方法中

注2：将View设置为clearColor

注3：不能将按钮设置为高亮状态改变(否则手指松开就回复正常状态)，应该设置为选中状态(可手动管理该状态)

4> 监听手指点击，选中改变状态

注1：不能使用addTarget，否则手指松开才会表示选中，应在touchesBegan方法中监听，判断手指点击位置是否在按钮上，若是则改变状态

注2：需要使按钮关闭用户交互，否则touchesBegan会被按钮拦截

5> 手指滑动也需要改变按钮状态

注：抽取上述方法

6> 圆的连线

1. 添加一个可变数组存放选中的按钮(懒加载)，并增加一个变量保存手指滑动时的实时位置

2. 一开始点击或者移动的时候，一旦选中了按钮就加到数组中

3. 在touchMove方法中重绘

4. 在drawRect:方法中画线

5. 已选中的按钮不需要再拖线，在增加按钮的过程中加入判断

注：不需要获取上下文再绘制，直接用UIBezierPath渲染即可，内部已封装

7> 手指抬起，取消选中处理

注：在重绘代码中，首先判断一下数组有没有值，若没有值，直接返回 

8> 手指移动时，快到圆心处才表示选中

9> 是否正确解锁的判断方法，根据按钮的tag组成字符串，判断是否正确

5、画板 --- 重要

5.1 界面

源代码下载地址：点击打开链接

5.2 实现思路

1> 搭建界面

1. 上面工具栏UIToolBar，注意使用自动布局(上、左、右、高度固定)，保证在旋转屏幕的时候自动拉伸

2. 下面红色View自动布局(上、左、右、高度固定)

3. 滑动条自动布局(上：0，左、右：20)

4. 下面三个按钮自动布局：第一个(左、下：20，高：30)，警告(更新frame)；第二个：先设置frame的x为70(第一个按钮的x最大值为50，间距为20)，按住Ctrl，将第二个按钮拖到第一个按钮，进行(按住Shift)勾选对齐选择，同理第三个按钮(右：20)

5. 中间画板自动布局(上、下、左、右：0)

2> 基本画线实现

1. touchBegin确定路径起点

2. touchMove确定路径终点，重绘

3. 添加路径数组，存放多条路径(懒加载)

3> 改变线宽 & 颜色

1. 监听滑动条值(2~15)改变，设置给画板的线宽属性

注1：要在画板View的awakeFromNib方法中初始化线宽，否则初始化为0，画不出线条

注2：应在创建路径的时候设置线宽，不能在重绘函数中设置线宽，否则所有线条均为同一个线宽

2. 监听颜色按钮的点击，直接传按钮的背景色即可，不需要按钮的tag来生成颜色

注：需要一个路径自定义一个颜色、线宽等属性，系统自带的UIBezierPath没有颜色属性，也不能在重回函数中统一设置颜色，因此需要自定义一个路径类(继承自UIBezierPath)，扩展这些属性

3. 自定义路径类(封装属性)

4. 设置线宽 & 颜色

给颜色属性赋值后，在重绘函数中改变绘制路径颜色

 

4> 清屏 & 撤销 & 橡皮擦

1. 在画板View中封装清屏方法(清空路径数组，重绘)，控制器调用清屏

注：在重绘函数中先判断是否有路径，没有直接返回

2. 同理，撤销(移除最后一个路径)

3. 橡皮擦(设置线条颜色为白色即可)

 

5> 保存

1. 对画板View进行截屏

2. 保存到相册中

6> 图片选择

1. 照片选择器UIImagePickerController

2. 设置数据源，实现代理(<UINavigationControllerDelegate,UIImagePicker -ControllerDelegate>)

3. 在代理中取出图片，传到画板的UIImage属性中，重写setter方法，重绘

注：同时需要加到路径数组中，因为重绘会按照顺序绘制，修改重绘方法

7> 实现选中图片后，先填充到画板中，可以手动缩放、旋转，长按后才开启画板模式

思路：1. 增加一个透明的View(HMHandleImageView)添加到控制器View的画板View位置，将图片先显示到HMHandleImageView的UIImageView中，在该View中进行对图片的缩放旋转(使用手势)

2. 当进行长按后，将HMHandleImageView进行截屏，截得的图片放到画板中，再在画板上进行绘制