Quartz2D

一、Quartz2D概述

Quartz2D是一个二维绘图引擎，同时支持Mac和iOS系统

Quartz2D能绘制图形、绘制文字、绘制图片、生成PDF、裁剪图片等，还可以用来自定义UI控件。

例如画板应用、手势解锁功能、图形报表等都是用Quartz2D实现的。

1. 图形上下文（Graphics Context）

图形上下文（Graphics Context）是一个CGContextRef类型的数据，它用来保存绘图信息、绘图状态和决定绘制的输出目标（输出目标可以是PDF文件、Bitmap或者显示器的窗口上）。

相同的一套绘图序列，指定不同的图形上下文可将相同的图像绘制到不同的目标上。

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

• Bitmap Graphics Context
• PDF Graphics Context
• Window Graphics Context
• Layer Graphics Context
• Printer Graphics Context

2. drawRect:方法

当view第一次显示到屏幕上时（被加到UIWindow上显示出来）就会调用drawRect:，调用view的setNeedDisplay或者setNeedDisplayInRect:时也会调用drawRect:

3. drawRect:中取得上下文

在drawRect:方法中取得上下文后，就可以绘制图形到view上面了。view内部有个layer属性，drawRect:方法中取得的是一个Layer Graphics Context，因此绘制的图形其实是绘制到view的layer上去了。

view之所以能显示东西，是因为它内部有layer。

4. Quartz2D的内存管理

使用含有“Create”或“Copy”的函数创建的对象，使用完后必须释放，否则将导致内存泄露，使用不含“Create”或“Copy”的函数获取的对象，则不需要释放。

如果retain了一个对象，不再使用时也需要将其release掉。

可以使用Quartz2D的函数来指定retain和release一个对象，例如，如果创建了一个CGColorSpace对象，则使用函数CGColorSpaceRetain和CGColorSpaceRelease来retain和release对象。

也可以使用Core Foundation的CFRetain和CFRelease。注意不能传递NULL值给这些函数。

 

二、代码

1. 画三角形

/**
 *  画三角形
 */
void drawTriangle()
{
    // 1.获得图形上下文
    CGContextRef contextRef = UIGraphicsGetCurrentContext();
    
    // 2.拼接图形路径
    // 设置一个起点
    CGContextMoveToPoint(contextRef, 100, 100);
    // 添加一条线段到（100，100）
    CGContextAddLineToPoint(contextRef, 200, 200);
    // 添加一条线段到（150，40）
    CGContextAddLineToPoint(contextRef, 150, 40);
    // 关闭路径（连接起点和终点）
    CGContextClosePath(contextRef);
    
    // 3.渲染显示到View上面
    CGContextStrokePath(contextRef);
}

2. 画矩形

/**
 *  画四边形
 */
void drawQuadrilateral()
{
    // 1.获得图形上下文
    CGContextRef contextRef = UIGraphicsGetCurrentContext();
    // 2.画矩形
    CGContextAddRect(contextRef, CGRectMake(100, 100, 150, 100));
    // 3.绘制图形
    CGContextStrokePath(contextRef);
}

3. 画圆

/**
 *  画圆
 */
void drawCircle()
{
    // 1.获得图形上下文
    CGContextRef contextRef = UIGraphicsGetCurrentContext();
    // 2.画圆
    CGContextAddEllipseInRect(contextRef, CGRectMake(100, 100, 100, 100));
    // 3.绘制图形
    CGContextFillPath(contextRef);
}

4. 画圆弧

/**
 *  画圆弧
 */
void drawArc()
{
    // 1.获得图形上下文
    CGContextRef contextRef = UIGraphicsGetCurrentContext();
    
    // 2.画圆弧
    // x\y : 圆心坐标
    // radius : 半径
    // startAngle : 开始角度
    // endAngle : 结束角度
    // clockwise : 圆弧的伸展方向（0：顺时针， 1：逆时针）
    CGContextAddArc(contextRef, 100, 100, 50, 0, M_PI, 1);
    
    // 3.绘制图形
    CGContextStrokePath(contextRef);
}

5. 画文字

/**
 *  画文字
 */
void drawText()
{
    NSString *str = @"画文字";
    // 设置文字属性
    NSMutableDictionary *attrs = [NSMutableDictionary dictionary];
    attrs[NSForegroundColorAttributeName] = [UIColor redColor];
    attrs[NSFontAttributeName] = [UIFont systemFontOfSize:20];
    
    // 将文字画在某个位置
    [str drawAtPoint:CGPointMake(100, 100) withAttributes:attrs];
    
    // 将文字画在矩形框内
//    [str drawInRect:CGRectMake(100, 100, 100, 100) withAttributes:attrs];
}

6. 画图片

/**
 *  画图片
 */
void drawImage()
{
    UIImage *image = [UIImage imageNamed:@"1.jpg"];
    [image drawAsPatternInRect:CGRectMake(100, 100, 100, 100)];
}

7. 图形上下文栈

/**
 *  图形上下文栈
 */
void ContextSaveGState()
{
    // 获得图形上下文
    CGContextRef contextRef = UIGraphicsGetCurrentContext();
    
    // 将contextRef拷贝一份放到栈中
    CGContextSaveGState(contextRef);
    
    // 设置绘图状态
    CGContextSetLineWidth(contextRef, 10);
    [[UIColor redColor] set];
    CGContextSetLineCap(contextRef, kCGLineCapRound);
    
    // 第一根线
    CGContextMoveToPoint(contextRef, 50, 50);
    CGContextAddLineToPoint(contextRef, 120, 190);
    
    // 画线
    CGContextStrokePath(contextRef);
    
    // 将栈顶的上下文出栈，替换当前的上下文
    CGContextRestoreGState(contextRef);
    
    // 第二根线
    CGContextMoveToPoint(contextRef, 10, 70);
    CGContextAddLineToPoint(contextRef, 220, 290);
    
    // 画线
    CGContextStrokePath(contextRef);
}

8. 矩阵操作（图形整体缩放、移动、旋转等等）

/**
 *  矩阵操作
 */
void contextMatrix()
{
    // 获得图形上下文
    CGContextRef contextRef = UIGraphicsGetCurrentContext();
    
    // 缩小0.5倍（在画线条之前设置）
    CGContextScaleCTM(contextRef, 0.5, 0.5);
    // 旋转
    CGContextRotateCTM(contextRef, M_PI_4);
    // 移动
    CGContextTranslateCTM(contextRef, 0, 150);
    
    // 画矩形
    CGContextAddRect(contextRef, CGRectMake(100, 100, 100, 100));
    CGContextStrokePath(contextRef);
}

9. 图片裁剪

/**
 *  图片裁剪
 */
- (void)imageClip
{
    // 1.加载原图
    UIImage *oldImage = [UIImage imageNamed:@"1.jpg"];
    // 2.开启上下文
    UIGraphicsBeginImageContextWithOptions(oldImage.size, NO, 0.0);
    // 3.取得当前的上下文
    CGContextRef contextRef = UIGraphicsGetCurrentContext();
    // 4.画圆
    CGRect circleRect = CGRectMake(0, 0, oldImage.size.width, oldImage.size.height);
    CGContextAddEllipseInRect(contextRef, circleRect);
    // 5.按照当前的路径形状（圆形）裁剪，超出这个形状以外的内容都不显示
    CGContextClip(contextRef);
    // 6.画图
    [oldImage drawInRect:circleRect];
    // 7.取图
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    // 8.结束
    UIGraphicsEndImageContext();
}

10. 截屏

/**
 *  截屏
 */
- (void)screenCut
{
    // 1.开启上下文
    UIGraphicsBeginImageContextWithOptions(self.frame.size, NO, 0.0);
    // 2.将控制器view的layer渲染到上下文
    [self.layer renderInContext:UIGraphicsGetCurrentContext()];
    // 3.取出图片
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    // 4.结束上下文
    UIGraphicsEndImageContext();
}

11. 重绘

/**
 *  重绘
 */
- (void)reDraw
{
    // 重绘(这个方法内部会重新调用drawRect:方法进行绘制)
    [self setNeedsDisplay];
}

12. 常用属性

/**
 *  常用属性
 */
void ContextProperty()
{
    // 获得图形上下文
    CGContextRef contextRef = UIGraphicsGetCurrentContext();
    
    // 设置线段宽度
    CGContextSetLineWidth(contextRef, 10);
    // 设置颜色
    CGContextSetRGBStrokeColor(contextRef, 1, 0, 0, 1);
    // 设置线段头尾部样式
    CGContextSetLineCap(contextRef, kCGLineCapRound);
    // 设置线段转折点的样式
    CGContextSetLineJoin(contextRef, kCGLineJoinRound);
    // set : 同时设置为实心和空心颜色
    // setStroke : 设置空心颜色
    // setFill : 设置实心颜色
    [[UIColor whiteColor] set];
    
    // 裁剪，裁剪后所画内容只能在裁剪的范围内显示
    CGContextClip(contextRef);
}