iOS学习笔记(6):Quartz2D

什么是Quartz2D

• Quartz 2D 是一个二维绘图引擎，同时支持iOS和Mac系统

Quartz 2D的作用

1. 绘制图形：线条\三角形\矩形\圆形\弧\扇形等
2. 绘制文字
3. 绘制\生成图片（图像）
4. 读取\生成PDF
5. 截图\裁剪图片
6. 自定义UI控件

图形上下文

• 一个CGContextRef类型的数据

图形上下文的作用

1. 保存绘图信息、绘图状态
2. 决定绘制的输出目标（绘制到什么地方去?）
3. 相同的一套绘图序列，指定不同的Graphics Context，就可将相同的图像绘制到不同的目标上

自定义View

如何利用Quartz 2D绘制东西到view上？

• 首先，得有图形上下文，因为它能保存绘图信息，并且决定着绘制到什么地方去
• 其次，那个图形上下文必须跟view相关联，才能将内容绘制到view上面

自定义view的步骤

1. 新建一个类，继承UIView
2. 实现- (void)drawRect:(CGRect)rect方法

// 取得跟当前view相关联的图形上下文
// 绘制相应的图形内容
// 利用图形上下文将绘制的所有内容渲染显示到view上面
- (void)drawRect:(CGRect)rect
> 在drawRect:方法中才能取得跟view相关联的图形上下文
> drawRect:方法在什么时候调用？
> 当view第一次显示到屏幕上时（被加到UIWindow上显示出来）
> 调用view的setNeedsDisplay或者setNeedsDisplayInRect:时

Quartz 2D绘图的代码步骤

1. 获得图形上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
2. 拼接路径
CGContextMoveToPoint(ctx,10,10);
CGContextAddLineToPoint(ctx,100,100);
3. 绘制路径
CGContextStrokePath(ctx);
CGContextFillPath(ctx);

常用拼接路径函数

// 新建一个起点
void CGContextMoveToPoint(CGContextRef c, CGFloat x, CGFloat y)
// 添加新的线段到某个点
void CGContextAddLineToPoint(CGContextRef c, CGFloat x, CGFloat y)
// 添加一个矩形
void CGContextAddRect(CGContextRef c, CGRect rect)
// 添加一个椭圆
void CGContextAddEllipseInRect(CGContextRef context, CGRect rect)
// 添加一个圆弧
void CGContextAddArc(CGContextRef c, CGFloat x, CGFloat y, CGFloat radius, CGFloat startAngle, CGFloat endAngle, int clockwise)

常用绘制路径函数

// Mode参数决定绘制的模式
void CGContextDrawPath(CGContextRef c, CGPathDrawingMode mode)
// 绘制空心路径
void CGContextStrokePath(CGContextRef c)
// 绘制实心路径
void CGContextFillPath(CGContextRef c)
PS：一般以CGContextDraw、CGContextStroke、CGContextFill开头的函数，都是用来绘制路径的

图形上下文栈的操作

// 将当前的上下文copy一份，保存到栈顶(图形上下文栈）
void CGContextSaveGState(CGContextRef c)
// 将栈顶的上下文出栈，替换掉当前的上下文
void CGContextRestoreGState(CGContextRef c)

矩形操作(transform)

// 缩放
void CGContextScaleCTM(CGContextRef c, CGFloat sx, CGFloat sy)
// 旋转
void CGContextRotateCTM(CGContextRef c, CGFloat angle)
// 平移
void CGContextTranslateCTM(CGContextRef c, CGFloat tx, CGFloat ty)

应用实例

画直线

// 1.取得一个跟view相关联的上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 2.描述路径
UIBezierPath *path = [UIBezierPath bezierPath];
// 2.1. 设置起点
[path moveToPoint:CGPointMake(10, 100)];
// 2.2. 添加一根线到某个点
[path addLineToPoint:CGPointMake(200, 20)];
// 把上一条线的终点当作是下一条线的起点.
[path addLineToPoint:CGPointMake(150, 200)];
// 3.把路径添加到上下文
CGContextAddPath(ctx, path.CGPath);
// 4.把上下文的内容显示View fill stroke
CGContextStrokePath(ctx);

设置上下文的状态

//设置线的宽度
CGContextSetLineWidth(ctx, 10);
//设置线的连接样式
CGContextSetLineJoin(ctx, kCGLineJoinBevel);
//设置顶角的样式
CGContextSetLineCap(ctx, kCGLineCapRound);
//设置线的颜色
[[UIColor greenColor] setStroke];

画曲线

//1.获取跟View相关联的上下文
CGContextRef ctx =  UIGraphicsGetCurrentContext();
//2.描述路径
UIBezierPath *path = [UIBezierPath bezierPath];
//2.1设置起点
[path moveToPoint:CGPointMake(20, 200)];
//2.2添加一条曲线到某个点.
[path addQuadCurveToPoint:CGPointMake(200, 200) controlPoint:CGPointMake(100, 10)];
//3.把路径添加到上下文
CGContextAddPath(ctx, path.CGPath);
//4.把上下文的内容显示出来.
CGContextStrokePath(ctx);

画矩形

//1.获取上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
//2.描述路径
UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(50, 50, 100, 100)];
//3.把路径添加到上下文
CGContextAddPath(ctx, path.CGPath);
[[UIColor yellowColor] set];
//4.把上下文的内容显示
CGContextFillPath(ctx);

画扇形

//ArcCenter:圆心
//radius:圆的半径
//startAngle:开始角度//起始点圆的最右侧.
//endAngle:截至角度
//clockwise:顺时针还是逆时针 YES:顺时针 NO:逆时针
CGPoint center = CGPointMake(rect.size.width * 0.5, rect.size.height * 0.5);
CGFloat radius = rect.size.width * 0.5 - 10;
CGFloat startA = 0;
CGFloat endA = -M_PI_2;
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:NO];
[path addLineToPoint:center];
//封闭路径
[path closePath];
//fill,会自动把路径给关闭
[path fill];

画文字

NSString *str = @"Quartz 2D文字渲染";
//AtPoint:文字所画的位置
//withAttributes:描述文字的属性.
NSMutableDictionary *dict = [NSMutableDictionary dictionary];
//设置文字大小
dict[NSFontAttributeName] = [UIFont systemFontOfSize:50];
//设置文字颜色
dict[NSForegroundColorAttributeName] = [UIColor greenColor];
//设置描边宽度
dict[NSStrokeWidthAttributeName] = @2;
//设置描边颜色
dict[NSStrokeColorAttributeName] = [UIColor blueColor];
//设置阴影
NSShadow *shadow = [[NSShadow alloc] init];
//设置阴影的便宜量
shadow.shadowOffset = CGSizeMake(10, 10);
//设置阴影颜色
shadow.shadowColor = [UIColor greenColor];
//设置阴影模糊程序
shadow.shadowBlurRadius = 1;
dict[NSShadowAttributeName] = shadow;
//不会自动换行
[str drawAtPoint:CGPointZero withAttributes:dict];
//会自动换行.
[str drawInRect:self.bounds withAttributes:dict];

画图像

//1.加载图片
UIImage *image = [UIImage imageNamed:@"001"];
//绘制出来的图片,是保持原来图片
[image drawAtPoint:CGPointZero];
//把图片填充到这个rect当中.
[image drawInRect:rect];
//添加裁剪区域 .把超区裁剪区域以外都裁剪掉
UIRectClip(CGRectMake(0, 0, 50, 50));
[image drawAsPatternInRect:self.bounds];
UIRectFill(CGRectMake(10, 10, 100, 100));

图片水印

// 1.图片加载
UIImage *image = [UIImage imageNamed:@"卡哇伊"];
//生成图片.
//size:开开启一个多大图片上下文.
//opaque:不透度
//scale:0
//开启跟图片相同的大小上下文.
UIGraphicsBeginImageContextWithOptions(image.size, NO, 0.0);
//把图片给绘制图片上下文.
[image drawAtPoint:CGPointZero];
//绘制文字
NSString *str = @"图片水印";
[str drawAtPoint:CGPointZero withAttributes:@{NSFontAttributeName : [UIFont systemFontOfSize:20]}];
//生成图片
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
//手动关闭上下文
UIGraphicsEndImageContext();
self.imageV.image = newImage;

图片裁剪

//1.加载图片
UIImage *image = [UIImage imageNamed:@"阿狸头像"];
//2.生成一个跟图片相同大小图片上下文
UIGraphicsBeginImageContextWithOptions(image.size, NO, 0);
//3.在上下文添加一个圆形裁剪区域
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, image.size.width, image.size.height)];
//把路径设置成裁剪区域
[path addClip];
//4.把图片绘制图片上下文.
[image drawAtPoint:CGPointZero];
//5.生成一张图片
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
//6.关闭图片上下文.
UIGraphicsEndImageContext();
self.imageV.image = newImage;