Quartz2D使用详解

首先介绍一下使用Quartz2D能做些什么：

• 绘制图形 : 线条\三角形\矩形\圆\弧等；
• 绘制文字；
• 绘制\生成图片(图像)；
• 读取\生成PDF；
• 截图\裁剪图片；
• 自定义UI控件；

图形上下文

图形上下文（Graphics Context）：是一个CGContextRef类型的数据。
图形上下文的作用：

• （1）保存绘图信息、绘图状态
• （2）决定绘制的输出目标（绘制到什么地方去？）
  （输出目标可以是PDF文件、Bitmap或者显示器的窗口上）相同的一套绘图序列，指定不同的Graphics Context，就可将相同的图像绘制到不同的目标上。

Quartz2D提供了以下几种类型的Graphics Context：

• （1）Bitmap Graphics Context
• （2）PDF Graphics Context
• （3）Window Graphics Context
• （4）Layer Graphics Context
• （5）Printer Graphics Context

使用Quartz2D自定义View

步骤：

• (1)新建一个类，继承自UIView
• (2)实现-(void)drawRect:(CGRect)rect方法，然后在这个方法中取得跟当前view相关联的图形上下文
  CGContextRef ctx = UIGraphicsGetCurrentContext();
• (3)绘制相应的图形内容

画扇形

- (void)drawRect:(CGRect)rect {
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGContextMoveToPoint(ctx, 100, 100);
    CGContextAddLineToPoint(ctx, 100, 150);
    CGContextAddArc(ctx, 100, 100, 50, -M_PI_2, M_PI_2, 1);
    CGContextClosePath(ctx);
    [[UIColor redColor] set];
    CGContextFillPath(ctx);
}

**  注：**
//M_PI的含义:π
//M_PI * 2的含义:2π
//M_PI_2的含义:π/2
//M_PI / 2的含义:π/2
// 画的图形路径
//bezierPathWithArcCenter:弧所在的圆心
//radius:圆的半径
//startAngle:开始角度,圆的最右侧为0度
//endAngle:截至角度,向下为正,向上为负.
//clockwise:时针的方向,yes:顺时针 no:逆时针
`UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:self.center radius:radius startAngle:startA endAngle:endA clockwise:NO];`

注意4点:

• 手动调用drawRect:方法，不会自动创建跟View相关联的上下文。应该调用setNeedsDisplay方法,系统底层会自动调用drawRect，告诉系统重新绘制View.这样，系统底层会自动创建跟View相关联的上下文
• setNeedsDisplay底层会调用drawRect,并不是立马调用的.只是设了一个调用的标志.调用时刻是等下一次屏幕刷新时才去调用drawRect。屏幕每一秒刷新30-60秒次,所以1秒调用drawRect方法大概30-60次,速度非常快哦
• view内部有个layer（图层）属性，drawRect:方法中取得的是一个Layer Graphics Context，因此，绘制的东西其实是绘制到view的layer上去了
• View之所以能显示东西，完全是因为它内部的layer

Quartz2D重要函数

常用拼接路径函数

• 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)添加一个圆弧

常用绘制路径函数

一般以CGContextDraw、CGContextStroke、CGContextFill开头的函数，都是用来绘制路径的。

• void CGContextDrawPath(CGContextRef c, CGPathDrawingMode mode) Mode参数决定绘制的模式
• void CGContextStrokePath(CGContextRef c)绘制空心路径
• void CGContextFillPath(CGContextRef c)绘制实心路径

矩阵操作函数

利用矩阵操作，能让绘制到上下文中的所有路径一起发生变化。

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

其他常用函数

• 设置线段宽度: CGContextSetLineWidth(ctx, 10);
• 设置线段头尾部的样式：CGContextSetLineCap(ctx, kCGLineCapRound);
• 设置线段转折点的样式: CGContextSetLineJoin(ctx, kCGLineJoinRound);
• 设置颜色 : CGContextSetRGBStrokeColor(ctx, 1, 0, 0, 1);

画矩形，正方形

- (void)drawRect:(CGRect)rect {
   //1.获取上下文
   CGContextRef ctx = UIGraphicsGetCurrentContext();
   //2.描述路径
   UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(50, 50, 200, 200)];
   //3.把路径添加到上下文
   CGContextAddPath(ctx, path.CGPath);
   [[UIColor redColor] set];// 路径的颜色
   CGContextSetLineWidth(ctx, 10);
   //4.把上下文的内容渲染到View的layer.
   //CGContextStrokePath(ctx);// 描边路径
   CGContextStrokePath(ctx);// 填充路径
}

画圆形

- (void)drawRect:(CGRect)rect {
 //1.获取上下文
 CGContextRef ctx = UIGraphicsGetCurrentContext();
 //2.描述路径
 // cornerRadius:圆角半径。矩形的宽高都为200，如果圆角为100，那么两个角之间弧线上任意一点到矩形中心的距离都为100,所以为圆形
 UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(50, 50, 200, 200) cornerRadius:100];
 //3.把路径添加到上下文
 CGContextAddPath(ctx, path.CGPath);
 [[UIColor redColor] set];// 路径的颜色
 //4.把上下文的内容渲染到View的layer.
 // CGContextStrokePath(ctx);// 描边路径
 CGContextFillPath(ctx);// 填充路径
}

画圆角矩形

- (void)drawRect:(CGRect)rect {
  
 //1.获取上下文
 CGContextRef ctx = UIGraphicsGetCurrentContext();
 //2.描述路径
 // cornerRadius:圆角半径。
 UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(50, 50, 200, 200) cornerRadius:50];
 //3.把路径添加到上下文
 CGContextAddPath(ctx, path.CGPath);
  
 [[UIColor redColor] set];// 路径的颜色
  
 //4.把上下文的内容渲染到View的layer.
 CGContextStrokePath(ctx);// 描边路径
 //CGContextFillPath(ctx);// 填充路径
  
}

画直线

- (void)drawRect:(CGRect)rect {
 //1.获取跟View相关联的上下文(uigraphics开头)
 CGContextRef ctx = UIGraphicsGetCurrentContext();
 //2.描述路径
 //一条路径可以绘制多条线 路径:path  路径绘制多条线:path使用了两次（2次的起点到终点），都是将线添加到某个点
 UIBezierPath *path = [UIBezierPath bezierPath];
 //设置起点
 [path moveToPoint:CGPointMake(50, 150)];
 //添加一根线Line到某个点
 [path addLineToPoint:CGPointMake(250, 50)];
 //画第二根线
 [path moveToPoint:CGPointMake(50, 250)];
 [path addLineToPoint:CGPointMake(250, 100)];
 //设置线宽
 CGContextSetLineWidth(ctx, 20);
 //设置线的连接样式
 CGContextSetLineJoin(ctx, kCGLineJoinBevel);
 //设置线的顶角样式
 CGContextSetLineCap(ctx, kCGLineCapRound);// 圆角线条
 //设置线条颜色
 [[UIColor redColor] set];
 //3.把路径添加到上下文
 CGContextAddPath(ctx, path.CGPath);
 //4.把上下文当中绘制的内容渲染到跟View关联的layer
 CGContextStrokePath(ctx);
}

绘制文字

- (void)drawRect:(CGRect)rect {
  
 NSString *str = @"HelloWorld";
  
 NSMutableDictionary *dict = [NSMutableDictionary dictionary];
 //设置字体
 dict[NSFontAttributeName] = [UIFont systemFontOfSize:30];
 //设置颜色
 dict[NSForegroundColorAttributeName] = [UIColor redColor];
 //设置描边
 dict[NSStrokeColorAttributeName] = [UIColor blueColor];
 dict[NSStrokeWidthAttributeName] = @3;
 //设置阴影
 NSShadow *shadow = [[NSShadow alloc] init];
 shadow.shadowColor = [UIColor greenColor];
 shadow.shadowOffset = CGSizeMake(-2, -2);
 shadow.shadowBlurRadius = 3;
 dict[NSShadowAttributeName] = shadow;
  
 //设置文字的属性
 //drawAtPoint不会自动换行
 //[str drawAtPoint:CGPointMake(0, 0) withAttributes:dict];
 //drawInRect会自动换行
 [str drawInRect:self.bounds withAttributes:dict];
  
}