一、简介

Quartz 2D是一个二维图形绘制引擎，支持iOS环境和Mac OS X环境。我们可以使用Quartz 2D API来实现许多功能，如绘制基本路径、图形，绘制文字、阴影、图层，绘制和生成图片(图像)，读取和生成PDF，自定义UI控件。
Quartz 2D在图像中使用了绘画者模型(painter’s model)。在绘画者模型中，每个连续的绘制操作都是将一个绘制层(a layer of ‘paint’)放置于一个画布，我们通常称这个画布为(Page)。 Page上的绘图可以通过额外的绘制操作来叠加更多的绘图。Page上的图形对象只能通过叠加更多的绘图来改变。这个模型允许我们使用小的图形元素来构建复杂的图形。不同的绘制顺序所产生的效果也是不一样的。Page可以是一张纸(如果输出设备是打印机)，也可以是虚拟的纸张(如果输出设备是PDF文件)，还可以是bitmap图像。这根据实际使用的graphics context而定。

1.图形上下文

Graphics Context是一个数据类型(CGContextRef)，用于封装Quartz绘制图像到输出设备的信息，输出设备可以是PDF文件、bitmap或者显示器的窗口上。Graphics Context中的信息包括了Page中的图像的图形绘制参数和设备相关的表现形式。当使用Quartz绘图时，所有设备相关的特性都包含在我们所使用的Graphics Context中。简单地说，给Quartz绘图序列指定不同的Graphics Context，就可将相同的图像绘制到不同的设备上。

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

• Bitmap Graphics Context
• PDF Graphics Context
• Window Graphics Context
• Layer Context
• Post Graphics Context

2.数据类型

除了 Graphics Context 之外，Quartz 2D API还定义一些数据类型。由于这些API就是Core Graphics框架的一部分，所以这些数据类型都是以CG开头的。
Quartz 2D使用这些数据类型来创建对象，通过操作这些对象来获取特定的图形。

下面列出了Quartz 2D包含的数据类型：

• CGPathRef：用于向量图，可创建路径，并进行填充或描画
• CGImageRef：用于表示bitmap图像和基于采样数据的bitmap图像遮罩。
• CGLayerRef：用于表示可用于重复绘制(如背景)和幕后(offscreen)绘制的绘画层
• CGPatternRef：用于重绘图
• CGShadingRef、CGGradientRef：用于绘制渐变
• CGFunctionRef：用于定义回调函数，该函数包含一个随机的浮点值参数。当为阴影创建渐变时使用该类型
• CGColorRef, CGColorSpaceRef：用于使用什么样颜色，颜色空间
• CGImageSourceRef,CGImageDestinationRef：用于在Quartz中移入移出数据
• CGFontRef：用于绘制文本
• CGPDFDictionaryRef, CGPDFObjectRef, CGPDFPageRef, CGPDFStream, CGPDFStringRef, 和CGPDFArrayRef：用于访问PDF的元数据
• CGPDFScannerRef, CGPDFContentStreamRef：用于解析PDF元数据
• CGPSConverterRef：用于将PostScript转化成PDF。在iOS中不能使用。

3.坐标系统

坐标系统定义是被绘制到Page上的对象的位置及大小范围。由于不同的设备有不同的图形功能，所以图像的位置及大小依赖于设备。如果在设备级别上定义坐标系统，则在一个设备上绘制的图形无法在其它设备上正常显示。
Quartz通过使用当前转换矩阵(current transformation matrix， CTM)将一个独立的坐标系统(user space)映射到输出设备的坐标系统(device space)，以此来解决设备依赖问题。 CTM是一种特殊类型的矩阵(affine transform, 仿射矩阵)，通过平移(translation)、旋转(rotation)、缩放(scale)操作将点从一个坐标空间映射到另外一个坐标空间。
UIKit默认的坐标系统与Quartz不同。在UIKit中，原点位于左上角，y轴正方向为向下。UIView通过将修改Quartz的Graphics Context的CTM[原点平移到左下角，同时将y轴反转(y值乘以-1)]以使其与UIView匹配。

4.内存管理

Quartz使用Core Foundation内存管理。所以，对象的创建与销毁与通常的方式是一样的。在Quartz中，需要记住如下一些规则：

如果创建或拷贝一个对象，你将拥有它，因此你必须释放它。通常，如果使用含有”Create”或“Copy”单词的函数获取一个对象，当使用完后必须释放，否则将导致内存泄露。
如果使用不含有”Create”或“Copy”单词的函数获取一个对象，你将不会拥有对象的引用，不需要释放它。
如果你不拥有一个对象而打算保持它，则必须retain它并且在不需要时release掉。可以使用Quartz 2D的函数来指定retain和release一个对象。例如，如果创建了一个CGColorspace对象，则使用函数CGColorSpaceRetain和CGColorSpaceRelease来retain和release对象。同样，可以使用Core Foundation的CFRetain和CFRelease，但是注意不能传递NULL值给这些函数。

5.部分API

注： 填充一个路径的时候，路径里面的子路径都是独立填充的。假如是重叠的路径，决定一个点是否被填充，有两种规则：

1.nonzero winding number rule:非零绕数规则，假如一个点被从左到右跨过，计数器+1，从右到左跨过，计数器-1，最后，如果结果是0，那么不填充，如果是非零，那么填充。
2.even-odd rule: 奇偶规则，假如一个点被跨过，那么+1，最后是奇数，那么要被填充，偶数则不填充，和方向没有关系。

二、简单使用

1.绘制基本图形

在 - (void)drawRect:(CGRect)rect 方法中调用 Quartz2D 的 API

绘制主要步骤：
1.获得图形上下文
2.绘制并拼接绘图路径
3.将路径添加到图形上下文中
4.渲染图形上下文

① 绘制线段

CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextMoveToPoint(ctx, 0, 0);
CGContextAddLineToPoint(ctx, 100, 100);
CGContextStrokePath(ctx);

② 绘制三角形

CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextMoveToPoint(ctx, 0, 0);
CGContextAddLineToPoint(ctx, 100, 100);
CGContextAddLineToPoint(ctx, 120, 80);
CGContextAddLineToPoint(ctx, 0, 0);
//或者 CGContextClosePath(ctx);
CGContextStrokePath(ctx);  //描线
//CGContextFillPath(ctx);  //填充

③ 绘制矩形/正方形

CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextAddRect(ctx, CGRectMake(0, 0, 100, 100));
CGContextStrokePath(ctx);  //描线
//CGContextFillPath(ctx);  //填充

④ 绘制椭圆/圆

CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextAddEllipseInRect(ctx, CGRectMake(0, 0, 100, 100));
CGContextStrokePath(ctx);  //描线
//CGContextFillPath(ctx);  //填充

⑤ 绘制圆环

CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextAddEllipseInRect(ctx, CGRectMake(0, 0, 100, 100));
CGContextSetLineWidth(ctx, 20); //线宽
CGContextStrokePath(ctx);  

⑥ 绘制圆弧

CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextAddArc(ctx, 100, 100, 50, 0, M_PI, 1);
CGContextStrokePath(ctx);  

⑦ 绘制虚线
CGContextSetLineDash(CGContextRef c, CGFloat phase, const CGFloat * lengths, size_t count)，用来设置怎样来绘制虚线。

lengths 指明虚线如何交替绘制，若lengths 的值为{10，10}，表示先绘制10个点，在跳过10个点，在绘制10个点，在跳过10个点，如此反复；若lengths的值为{10，20，10}，表示先绘制10个点，跳过20个点，绘制10个点，跳过10个点，绘制20个点，跳过10个点，如此反复；数组中的值循环使用。
phase 表示绘制第一条虚线时跳过多少个点，若 phase 为 8，lengths 为 {10，10}，则绘制第一条虚线时，先跳过8个点，在绘制（10 - 8）个点，第一条虚线的长度仅有2个点；phase 的值仅影响第一条虚线的绘制；
count 的值为数组lengths的长度。

CGContextRef ctx = UIGraphicsGetCurrentContext();
CGFloat lengths[] = {10.0,10.0}; 
CGContextSetLineDash(ctx, 0, lengths, 2);
CGContextMoveToPoint(ctx, 10, 50);
CGContextAddLineToPoint(ctx, 300, 50);
CGContextStrokePath(ctx);

⑧ 绘制曲线
CGContextAddCurveToPoint(CGContextRef c, CGFloat cp1x, CGFloat cp1y, CGFloat cp2x, CGFloat cp2y, CGFloat x, CGFloat y) 用来在当前点的位置开始绘制一条三次贝塞尔曲线，参数为两个控制点 (cp1x，cp1y) 和 (cp2x，cp2y) ，还有一个结束点(x，y);

三次贝塞尔曲线.gif

CGContextAddQuadCurveToPoint(CGContextRef c, CGFloat cpx, CGFloat cpy, CGFloat x, CGFloat y) 用来在当前点的位置开始绘制一条二次贝塞尔曲线，参数为一个控制点(cpx，cpy) 和 一个结束点(x，y);

二次贝塞尔曲线.gif

CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextMoveToPoint(ctx, 50, 50);
CGContextAddQuadCurveToPoint(ctx, 125, 184, 300, 50);
CGContextAddCurveToPoint(ctx, 200, 100, 10, 300, 200, 500);
CGContextStrokePath(ctx);

⑨ 绘制圆角矩形
自定义一个函数，来绘制圆角矩形。

 void CGContextAddRoundRect(CGContextRef __nullable c, CGRect rect, CGFloat radius){
    CGContextSaveGState(c);
    CGFloat x = rect.origin.x;
    CGFloat y = rect.origin.y;
    CGFloat width = rect.size.width;
    CGFloat height = rect.size.height;

    CGContextMoveToPoint(c, x + radius, y);
    CGContextAddLineToPoint(c, x + width - radius, y);
    CGContextAddArcToPoint(c, x + width, y, x + width, y + radius, radius);
    CGContextAddLineToPoint(c, x + width, y + height - radius);
    CGContextAddArcToPoint(c, x + width, y + height, x + width - radius, y + height, radius);
    CGContextAddLineToPoint(c, x + radius, y + height);
    CGContextAddArcToPoint(c, x, y + height, x, y + height - radius, radius);
    CGContextAddLineToPoint(c, x, y + radius);
    CGContextAddArcToPoint(c, x, y, x + radius, y, radius);
    CGContextRestoreGState(c);
}

⑩ 绘制多角星（限定角数为奇数）
自定义一个函数，来绘制奇数多角形。

void CGContextAddStar(CGContextRef __nullable c, NSInteger n, CGFloat dx, CGFloat dy, CGFloat radius){
    CGContextSaveGState(c);
    CGContextMoveToPoint(c, dx , dy - radius);
    CGFloat angle = 4 * M_PI / n;

    for (int i = 1; i <= n; i++) {
        CGFloat x = dx - sinf(i * angle) * radius;
        CGFloat y = dy - cosf(i * angle) * radius;
        CGContextAddLineToPoint(c, x, y);
    }
    CGContextRestoreGState(c);
}

2.绘制文字

使用NSString的 drawAtPoint:withAttributes: 方法 和 drawInRect:withAttributes: 方法

① 绘制文字

CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextSetTextDrawingMode(ctx, kCGTextStroke);
CGContextSetShadowWithColor(ctx, CGSizeMake(8, -6), 5, [UIColor grayColor].CGColor);
NSString * str = @"Quartz2D";
NSMutableDictionary * attrs = [NSMutableDictionary dictionary];
attrs[NSForegroundColorAttributeName] = [UIColor redColor];
attrs[NSFontAttributeName] = [UIFont systemFontOfSize:18];
[str drawAtPoint:CGPointZero withAttributes:attrs];
[str drawInRect:CGRectMake(0, 0, 100, 100) withAttributes:attrs];

② 在图片上绘制文字（图片水印）

UIImage * oldImage = [UIImage imageNamed:@"image"];
//创建一个基于位图的上下文（context）,并将其设置为当前上下文(context)，size：大小，opaque：是否透明，scale：缩放比例
UIGraphicsBeginImageContextWithOptions(oldImage.size, NO, 0.0);
 //在指定的点开始绘画图片，相当于在图片上添加了一个空白的图层
[oldImage drawAtPoint:CGPointZero];
NSString * text =  @"quartz2D";
NSDictionary *dict = @{
                       NSFontAttributeName : [UIFont systemFontOfSize:15],
                       NSForegroundColorAttributeName : [UIColor redColor]
                       };
//在图层上绘制文字
[text drawAtPoint:CGPointZero withAttributes:dict];
// 通过当前的图形上下文获取图片
UIImage * newImage =  UIGraphicsGetImageFromCurrentImageContext();
// 关闭图形上下文
UIGraphicsEndImageContext();
imageView.image = newImage;

3.渐变填充

CGGradientRef 用来绘制渐变的对象。

CGColorSpaceRef : 用来定义颜色空间，所谓颜色空间，简单的说就是不同颜色在不同的维度上取值最终组成一种颜色的过程。例如RGB，可以看成是一个三维坐标系，x、y、z轴坐标系分别代表红、绿、蓝三种颜色，那么在这三个坐标上分别取0~255范围内的不同值就可以组成各类颜色。当然，不同颜色空间的“坐标系”（颜色模型）是不同的（即颜色表示的方式是不同的），常用的颜色空间有RGB、CMYK、Gray等。
CGColorRef : CoreGaphics中颜色对象

components : 颜色组件的数组，这个数组中具体如何存储颜色要根据颜色空间而定；如果颜色空间使用的是RGB，那么数组中的元素四个为一组，分别是red（红）、green（绿）、blue（蓝）、alpha（透明度）；如果使用CMYK颜色空间，那么数组中的元素五个为一组，分别是cyan（青）、magenta（洋红）、yellow（黄）、black（黑）、alpha（透明度）。

locations : 渐变色所在的位置，默认范围是0.0 ~ 1.0。一个位置对应着一组颜色组件表示的颜色

count : locations数组的长度

注：使用方法名中带有“Create”字样的方法创建出来的对象，在该对象不再使用时，要使用对象的Release方法销毁对象。

绘制渐变填充有两种方式：
① 线性渐变：渐变色以直线方式从开始位置逐渐向结束位置渐变
② 径向渐变：渐变色以中心点为圆心开始向四周辐射，直到终止渐变

CGGradientDrawingOptions : 渐变的绘制方式有两种；
kCGGradientDrawsBeforeStartLocation 开始位置之前就进行绘制，到结束位置之后不再绘制；
kCGGradientDrawsAfterEndLocation开始位置之前不进行绘制，到结束点之后继续填充。

① 绘制线性渐变

CGContextRef ctx = UIGraphicsGetCurrentContext();
CGColorSpaceRef rgbSpace = CGColorSpaceCreateDeviceRGB();
CGColorRef beginColor = CGColorCreate(rgbSpace, (CGFloat[]){0.0, 0.0, 0.0, 1.0});
CGColorRef endColor = CGColorCreate(rgbSpace, (CGFloat[]){1.0, 1.0, 1.0, 1.0});
// 创建颜色数组
CFArrayRef colors = CFArrayCreate(kCFAllocatorDefault, (const void*[]){beginColor, endColor}, 2, nil); 
CGFloat locations[2] = {0, 1.0};
CGGradientRef gradient = CGGradientCreateWithColors(rgbSpace, colors, locations);
CFRelease(colors);
CGColorRelease(beginColor);
CGColorRelease(endColor);
CGContextDrawLinearGradient(ctx, gradient, CGPointMake(0, 0), CGPointMake(0, 500), kCGGradientDrawsAfterEndLocation);
CGColorSpaceRelease(rgbSpace);
CGGradientRelease(gradient);

② 绘制径向渐变

CGContextRef ctx = UIGraphicsGetCurrentContext();
CGColorSpaceRef rgbSpace = CGColorSpaceCreateDeviceRGB();
CGFloat compoents[12] = {
    1.0, 1.0, 1.0, 1.0,
    0.5, 0.5, 0.5, 1.0,
    0.0, 0.0, 0.0, 1.0
};
CGFloat locations[3] = {0, 0.5, 1.0};
CGGradientRef gradient = CGGradientCreateWithColorComponents(rgbSpace, compoents, locations, 3);
CGPoint startCenter = CGPointMake(200, 320);
CGPoint endCenter = CGPointMake(160, 280);
CGContextDrawRadialGradient(ctx, gradient, startCenter, 10, endCenter, 150, kCGGradientDrawsBeforeStartLocation);
CGColorSpaceRelease(rgbSpace);
CGGradientRelease(gradient);

4.模式填充

使用自定义的一种样式在一个区域上平铺填充，类似于铺瓷砖。这里用“砖块”来代表自定义的样式。Quartz 2D支持两种模式填充：有颜色填充和无颜色填充；有颜色填充就是在绘制砖块时就指定颜色，在调用填充时就不用再指定砖块颜色；无颜色模式就是绘制砖块时不用指定任何颜色，在调用填充时再指定具体填充颜色。推荐使用前者。

需要构建一个符合CGPatternDrawPatternCallback签名的回调函数，遵守 void 函数名 （void * info,CGContextRef context）的签名，这个函数专门用来创建“砖块”。

① 有颜色模式填充

void ColoredPatternCallback(void * info, CGContextRef context){
    CGFloat side = 20;
    CGContextSetFillColorWithColor(context, [UIColor whiteColor].CGColor);
    CGContextFillRect(context, CGRectMake(0, 0, side, side));
    CGContextSetFillColorWithColor(context, [UIColor blackColor].CGColor);
    CGContextFillRect(context, CGRectMake(0, side, side, side));
    CGContextSetFillColorWithColor(context, [UIColor blackColor].CGColor);
    CGContextFillRect(context, CGRectMake(side, 0, side, side));
    CGContextSetFillColorWithColor(context, [UIColor whiteColor].CGColor);
    CGContextFillRect(context, CGRectMake(side, side, side, side));
}

- (void)drawRect:(CGRect)rect{
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGColorSpaceRef colorSpace = CGColorSpaceCreatePattern(NULL);
    CGContextSetFillColorSpace(ctx, colorSpace);
    CGPatternCallbacks callback = {0,ColoredPatternCallback,NULL};
    CGPatternRef pattern = CGPatternCreate(NULL, CGRectMake(0, 0, 40, 40), CGAffineTransformIdentity, 40, 40, kCGPatternTilingNoDistortion, true, &callback);
    CGFloat alpha = 1;
    CGColorRef color = CGColorCreateWithPattern(colorSpace, pattern, &alpha);
    CGContextSetFillColorWithColor(ctx, color);
    CGContextFillRect(ctx, CGRectMake(0, 0, 320, 500));
    CGColorRelease(color);
    CGColorSpaceRelease(colorSpace);
    CGPatternRelease(pattern);
}

② 无颜色模式填充

void PatternCallback(void * info,CGContextRef context){
    CGContextFillRect(context, CGRectMake(0, 0, 20, 20));
    CGContextFillRect(context, CGRectMake(20, 20, 20, 20));
}

- (void)drawRect:(CGRect)rect{
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGColorSpaceRef rgbSpace = CGColorSpaceCreateDeviceRGB();
    CGColorSpaceRef colorSpace = CGColorSpaceCreatePattern(rgbSpace);
    CGContextSetFillColorSpace(ctx, colorSpace);
    CGContextSetStrokeColorSpace(ctx, colorSpace);
    CGPatternCallbacks callback = {0, PatternCallback, NULL};
    CGPatternRef pattern = CGPatternCreate(NULL, CGRectMake(0, 0, 40, 40), CGAffineTransformIdentity, 40, 40, kCGPatternTilingNoDistortion, false, &callback);
    CGFloat components[] = {1.0, 0.0, 0.0, 1.0};
    CGContextSetFillPattern(ctx, pattern, components);
    CGContextSetStrokePattern(ctx, pattern, components);
    CGContextFillRect(ctx, CGRectMake(20, 20, 200, 200));
    CGContextStrokeRectWithWidth(ctx, CGRectMake(20,240, 200, 200), 5);
    CGColorSpaceRelease(rgbSpace);
    CGColorSpaceRelease(colorSpace);
    CGPatternRelease(pattern);
}

5.绘制位图

UIImage 本身也提供了一些方法：

① 绘制图片

UIImage * image = [UIImage imageNamed:@"Quartz2D"];
[image drawAtPoint:CGPointZero];
[image drawInRect:CGRectMake(0, 0, 100, 100)]; //图片不够大则拉伸填充
[image drawAsPatternInRect:CGRectMake(0, 0, 100, 100)]; //图片不够大则平铺填充

② 合成图片

UIImage * bigImage = [UIImage imageNamed:@"big.jpg"];
UIImage * smallImage = [UIImage imageNamed:@"small.jpg"];

UIGraphicsBeginImageContextWithOptions(bigImage.size, NO, 0.0);
[bigImage drawInRect:CGRectMake(0, 0, bigImage.size.width, bigImage.size.height)];
[smallImage drawInRect:CGRectMake(0, 0, smallImage.size.width, smallImage.size.height)];

UIImage * newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

③ 裁剪图片

UIImage * oldImage = [UIImage imageNamed:@"Quartz2D"];
UIGraphicsBeginImageContextWithOptions(oldImage.size, NO, 0.0);
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGRect circleRect = CGRectMake(0, 0, oldImage.size.width, oldImage.size.height);
CGContextAddEllipseInRect(ctx, circleRect);
CGContextClip(ctx);
[oldImage drawInRect:circleRect];
UIImage * newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

④ 屏幕截图

UIGraphicsBeginImageContextWithOptions(self.view.frame.size, NO, 0.0);
[self.view.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage * screenImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

//给UIImage 添加一个类方法
+ (UIImage *)captureView:(UIView *)targetView{
    UIGraphicsBeginImageContextWithOptions(targetView.frame.size, NO, 0.0);
    [targetView.layer renderInContext:UIGraphicsGetCurrentContext()];
    UIImage * newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return newImage;
}