Quarz 2D是一个二维绘图引擎,用它能够:
➤绘制图形:线条、三角形、矩形、圆、弧等
➤绘制文字
➤绘制\生成图片(图像)
➤读取\生成PDF
➤截取\裁剪图片
➤自定义UI控件
Quarz 2D实例:
Quarz 2D能做很多强大的事情,比如
➤裁剪图片\圆形裁剪,
➤ 涂鸦画板,
➤ 以及手势解锁,
➤ 报表(折线图,饼状图,柱状图)
自定义view
在你的view上画东西,首先你要明白“图形上下文(Graphics Context)”的概念
- 图形上下文(Graphics Context):你可以想象理解成画板,它是一个CGContextRef类型的数据,属于CoreGraphics(核心绘图)框架。
- 图形上下文的作用:
➤保存绘图信息、绘图状态
➤决定绘制的输出目标(绘制到什么地方)(输出的目标可以是PDF文件,Bitmap或者显示器的窗口上) - 相同的一套绘图序列,指定不同的Graphics Context,就可以将相同的图像绘制到不同的目标
☐ Quarz 2D提供了以下几种类型的图形上下文:
➢Bitmap Graphics Context
➢ PDF Graphics Context
➢Window Graphics Context
➢Layer Graphics Context
➢Printer Graphics Context
自定义view
- 如何利用Quarz 2D绘制东西到view上?
➢首先得有图形上下文,因为它能保存绘图信息,并且决定着绘制到什么地方去
➢其次,哪个图形上下文必须跟view相关联,才嫩将内容绘制到view上面 - 自定义View步骤:
➢新建一个类,继承自UIView
➢实现- (void)drawRect:(CGRect)rect方法,然后在这个方法中:- 取得跟当前view相关联的图形上下文
- 绘制相应的图形内容---描述路径
- 利用图形上下文绘制的所有内容渲染显示到view上
新建一个MuView类,继承自UIView
#import <UIKit/UIKit.h>
@interface MuView : UIView
@end
在故事版中拖拽一个UIView,让其绑定MuView类型
drawRect
#import "MuView.h"
@implementation MuView
- (void)drawRect:(CGRect)rect{
/*因为只有在drawRect这个方法里面才能获取到跟view的layer相关联的图形上下文
*rect是当前控件的bounds
*当这个view要显示的时候,才会调用drawRect绘制图形
*/
[self ..];
}
@end
.
-(void)drawLine{
// 1获取图形上下文
// 目前我们所用的上下文都是以UIGraphics开头的
// CGContextRef Ref饮用 CG:目前使用到的类型和函数 一般都是CG开头 CoreGraphics
CGContextRef ctf = UIGraphicsGetCurrentContext();
// 2描述路径
// 创建路径
CGMutablePathRef path = CGPathCreateMutable();
//设置起点
//path:给哪个路径设置起点 CGAffineTransform:形变 x、y代表起点
CGPathMoveToPoint( path, NULL, 50, 50);
//添加一根线到某个点
CGPathAddLineToPoint(path, NULL, 200, 200);
// 3把路径添加到上下文
CGContextAddPath(ctf, path);
// 4渲染上下文
CGContextStrokePath(ctf);
}
.
- (void)drawLine1{
// 获取上下文
CGContextRef ref = UIGraphicsGetCurrentContext();
// 描述路径
// 设置起点 在这底层会帮我们创建一个path
CGContextMoveToPoint(ref, 150, 150);
CGContextAddLineToPoint(ref, 50, 50);
// 渲染上下文
CGContextStrokePath(ref);
}
.
-(void)drawLine2{
//UIKIT已经帮我们封装了一些绘图的功能
UIBezierPath *path = [UIBezierPath bezierPath];
// 设置起点
[path moveToPoint:CGPointMake(50, 50)];
// 添加一根线到某个点
[path addLineToPoint:CGPointMake(100, 100)];
// 绘制路径
[path stroke];
}