来来来，好玩的东西终于来了。接下来的几篇，咱们都将要聊一聊iOS中绘制图像的事儿哈。之前有一篇说到cell分割线顶头的方法中，有童鞋留言说还可以自己绘制。咳咳，会了绘图这个就不是难事儿啦～
还有很多App里面超炫的特效，其实也都是基于各种绘图、路径哒。来吧，骚年～让我们浪起来。
在此之前，分享了一些关于绘图方面的基础。可以通过传输门快捷进入：
1. Quartz2D
- Quartz 2D是一个二维绘图引擎，同时支持iOS和Mac OS X系统（跨平台，纯 C 语言的）。包含在 Core Graphics 框架中。
- Quartz 2D能完成的工作
- 绘制图形 : 线条\三角形\矩形\圆\弧等
- 绘制文字
- 绘制\生成图片(图像)
- 读取\生成PDF
- 截图\裁剪图片
- 饼状图、柱状图、折线图
- 自定义UI控件
注意:
Quartz 2D 是苹果官方的二维绘图引擎，同时支持 iOS 和 Mac OS X 系统。
Cocos2D（Cocos2D-x、Cocos2D-iPhone、Cocos2D-HTML5等）, Cocos2D 是一个第三方开源的2D游戏框架。做2D 游戏的 还有 Sprite Kit。 一般3D 游戏用 unity3D。
1.1 Quartz2D 绘图主要步骤
获取【context】对象
向【context】对象中添加【路径】
渲染（把【context】中的图形会知道对应的设备上）
一定要自定义一个view，把contxt和执行渲染的方法都放在自定义的view中
1.2 drawRect:
- 为什么要实现drawRect:方法才能绘图到view上？
因为在drawRect:方法中才能取得跟view相关联的context
- drawRect:方法在什么时候被调用？
当view第一次显示到屏幕上时（加到UIWindow上显示出来）
重绘的时候:调用view的setNeedsDisplay或者setNeedsDisplayInRect:时
1.3 Graphics Context
Graphics Context 是一个数据类型(CGContextRef)，用于封装 Quartz 绘制图像到输出设备的信息。
设备可以是PDF文件、bitmap或者显示器的窗口。 CGContextRef 对应绘画者模式中的 Page。
当用 Quartz 绘图时，所有设备相关的特性都包含在Graphics Context 中。通过给Quartz 指定不同的 Graphics Context，就可将相同的图像绘制到不同的设备上。
-
Quartz2D提供了以下几种类型的Graphics Context：
- Bitmap Graphics Context
- PDF Graphics Context
- Window Graphics Context
- Layer Graphics Context(UI控件)重点
- Printer Graphics Context
1.4 绘图路径和内存管理
1.4.1 绘制路径
-
drawRect:(CGRect)rect中的rect指的就是绘图view的bounds
- (void)drawRect:(CGRect)rect {
//1.获取图形上下文对象
CGContextRef ctx = UIGraphicsGetCurrentContext();
//2.创建路径
CGMutablePathRef pathM = CGPathCreateMutable();
//设置起点
CGPathMoveToPoint(pathM, NULL, 50, 50);
//加线
CGPathAddLineToPoint(pathM, NULL, 200, 200);
// 把路径添加到图形上下文中
CGContextAddPath(ctx, pathM);
//3.渲染
CGContextStrokePath(ctx);
//释放内存
// CGPathRelease(pathM);
CFRelease(pathM);
}
1.4.2 使用静态分析工具
- 静态分析工具的作用
- 不仅能够检测内存泄漏的问题,还能检测其他的问题.
- 这个工具仅仅是静态的在分析内存的问题,并不能真正的检测内存泄漏的问题.
1.4.3 使用Path 对象时的内存管理问题
使用Path对象的时候，一定要注意内存的问题，一定要注意内存释放。
- 凡是遇到 retain 、 copy 、 create 出的对象, 都需要进行 release
- 但是CGPathCreateMutable()不是 OC 方法, 所以不是调用 某个对象的 release方法
- CGXxxxxCreate 对应的就有 CGXxxxxRelease。
- 通过 CFRelease(任何类型)可以释放任何类型。
- CFRelease属于更底层的cocafoundation框架
- ARC仅仅是处理oc的引用计数的问题
2. 绘制基本图形
好了，坐好了，老司机开始开车啦～
2.1 绘制三角形
- (void)drawRect:(CGRect)rect {
// 获取context
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 创建起点
CGContextMoveToPoint(ctx, 10, 10);
// 创建两条线段的终点
CGContextAddLineToPoint(ctx, 10, 90);
CGContextAddLineToPoint(ctx, 90, 90);
// 闭合path，让他自动回到原点
CGContextClosePath(ctx);
// 执行渲染
CGContextStrokePath(ctx);
}
2.2 绘制四边形
- (void)drawRect:(CGRect)rect {
// Drawing code
// 获取context对象
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 添加路径
CGContextAddRect(ctx, CGRectMake(10, 10, 50, 50));
// 执行渲染
CGContextStrokePath(ctx);
}
2.3 绘制椭圆，也可以通过这种方式画圆
- (void)drawRect:(CGRect)rect {
// 获取context
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 添加椭圆，通过矩形的方式。给出矩形的起点坐标，长宽，绘制一个内切椭圆
CGContextAddEllipseInRect(ctx, CGRectMake(10, 10, 80, 50));
// 渲染
CGContextStrokePath(ctx);
}
2.4 绘制圆弧
- (void)drawRect:(CGRect)rect {
// 获取context
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 绘制扇形。参数：1+2，圆点坐标。参数3+4，起点和终点的弧度。参数5:0表示顺时针，1表示逆时针。
CGContextAddArc(ctx, 50, 50, 20, M_PI_4, M_PI, 1);
// 渲染
CGContextStrokePath(ctx);
}
2.5 画扇形
- 先画一个弧度，然后链接圆心，最后关闭路径就可以了。
- (void)drawRect:(CGRect)rect {
// 获取context
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 绘制扇形。参数：1+2，圆点坐标。参数3+4，起点和终点的弧度。参数5:0表示顺时针，1表示逆时针。
CGContextAddArc(ctx, 50, 50, 20, M_PI_4, M_PI, 1);
CGContextClosePath(ctx);
// 渲染
CGContextStrokePath(ctx);
}
2.6 画线段
- (void)drawRect:(CGRect)rect {
// 获取context对象
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 添加路径:起点、终点
CGContextMoveToPoint(ctx, 10, 10);
CGContextAddLineToPoint(ctx, 80, 80);
// 执行渲染
CGContextStrokePath(ctx);
}
好了，下车～下一篇要更新一下Quartz2D的渲染模式。
