iOS 进阶 第十二天(0413)
0413 - Quartz2D
使用Quartz2D画图形步骤:(drawRect: 方法 是 在view第一次显示到屏幕上的时候会调用一次.是系统主动去掉用的,不能直接调用.那么问题来了,比如我要通过滑块持续移动界面上画出的一个圆的位置怎么办呢?就要用到了刷帧也叫重绘,可以调用setNeedsDisplay方法,来让系统再次调用drawRect: 方法来达到目的.当然调用setNeedsDisplay是刷新整个界面,也可以通过调用``setNeedsDisplayInRect: 来刷新具体的矩形区域的界面.)
注意 drawRect: 方法在View第一次显示到界面上的时候会调用,这个可以用来做自己UIImageView.如下图
Quartz2D须知:
基本画线代码:
画线段、三角形和矩形方法
1、画三角形 需要一个一个点的画
2、画矩形 非平行四边形 非旋转矩形 有线程的方法直接画.如下图所示:
画圆和弧线
1、画圆,比较简单,就是在一个矩形框内画一个圆.如下图:(也可以通过话圆弧的方式画出来)
2、画圆弧,圆弧必须有圆心、半径,开始角度、结束角度以及是顺时针还是逆时针.如下图所示:
结合画线和画圆弧画1/4圆,如下图:
注意:右侧水平线永远是0度,顺时针度数变大,逆时针度数变小
画文字和图片(纯c的api画出来的都是倒的,咱们只用oc的方法来画,就是正的,并且不用传图形上下文)
1、画文字(使用纯c语言的api默认画出来的文字或图片是反的.因为Quartz2D默认屏幕左下角为(0, 0).那为什么刚才画的线段、圆和圆弧左上角是(0, 0)呢?因为UIKit框架帮我们做了一次坐标系的转换.用oc的方法来画不会倒过来)
- 用oc的方法画文字.这样就可以自定义一个UITextLabel(也可以换行)
2、画图片(平铺,亦可实现打水印效果)
注意画图片的平铺效果.其实中心点缩放技术最底层的也是调用Quartz2D来实现的
画小黄人
有个用画贝塞尔曲线画小黄人嘴巴,如下图:
图形上下文栈(Quartz2D核心)
重要的两行代码:
Quartz2D图形上下文CGContextRef处理原理
- 在界面上画单个元素
首先获取当前的图形上下文,设置了一些状态保存在图形上下文中,画线、圆或圆弧都会先在图形上下文栈里面开启一个画布,把要画的线、圆或圆弧画上去.,当调用了CGContextStrokePath(只是一个方法)的时候,图形上下文就会把自己画布上的元素绘制到界面上去.
- 在界面上画多个多状态的元素
首先获取当前图形上下文,调用CGContextSaveGState将当前获取的图形上下文完完整整的拷贝一份放到图形上下文栈中,待使用.接下来的操作都是在之前的图形上下文中做的操作,已经入栈的图形上下文不会被操作.当调用了CGContextStroke(只是一个方法)的时候系统就会将当前图形上下画布里的内容绘制到界面上.当调用了CGContextRestoreGState的时候,系统会将图形上下文栈中栈顶的图形上下文出栈,替换当前正在操作的图形上下文.此时再画线、圆或圆弧的时候,图形上下文中的状态都是初始状态.这样,利用图形上下文栈就做到了同时画多个不同状态的元素到界面上.
如下图所示:
画折线图、柱状图或者饼形图可以用CorePlot.它已经将Quartz2D封装好了
矩阵操作
这里就是对要画到界面上的元素做矩阵变换,包括平移、旋转和缩放.如下图所示:(这里也体现了图形上下文栈的作用)
你也可以在iOS文档中搜索Quartz2D,找实例代码来学习如下图:(可以做到画虚线各种样式、画五角星、图片处理、渐变色、颜色混合模式甚至查看pdf等等)
使用Quartz2D裁切图片
图片裁切可以使用UIImageView自身的图层layer来做,也可以用画图片然后使用QuartzD来裁切达到目的.不仅可以裁切圆,只要你能画出的形状都是按照你的图形上下文形状来裁切.如下图所示:
刷帧(重绘)setNeedsDisplay
就是重复的去画图形上下文中的元素.
问题:如果持续改变已经绘制到界面上的一个圆的位置或半径大小?
答:比如我要通过滑块持续移动界面上画出的一个圆的位置怎么办呢?就要用到了刷帧也叫重绘,可以调用setNeedsDisplay方法,来让系统再次调用drawRect: 方法来达到目的.当然调用setNeedsDisplay是刷新整个界面,也可以通过调用setNeedsDisplayInRect: 来刷新具体的矩形区域的界面.
在比如在界面上画一个雪花图片不停的下落,此时要用到 drawRect: 画图片 ,然后NSTimer计时器累加距离,最后计时器调用setNeedsDisplay刷帧重绘雪花图片位置达到雪花落下的效果.(这里如要想要刷的很快的话不建议使用NSTimer,建议使用CADisplayLink,它可以一秒刷60次.).如下图所示:
