iOS 2D绘图详解（Quartz 2D）之概述

 

---

前言：最近在研究自定义控件，由于想要彻底的定制控件的视图还是要继承UIView，虽然对CALayer及其子类很熟练，但是对Quartz 2D这个强大的框架仍然概念模棱两可。于是，决定学习下，暂定7篇文章讲解，会写一些Demo。
官方文档

本文的代码Demo在最后一部分

---

Quartz 2D用来干嘛的？

Quartz 2D属于Core Graphics（所以大多数相关方法的都是以CG开头），是iOS/Mac OSX 提供的在内核之上的强大的2D绘图引擎，并且这个绘图引擎是设备无关的。也就是说，不用关心设备的大小，设备的分辨率，只要利用Quartz 2D，这些设备相关的会自动处理。Quartz 2D能够提供的强大功能如下

透明层（transparency layers） 阴影 基于path的绘图（path-based drawing） 离屏渲染（offscreen rendering） 复杂的颜色处理（advanced color management） 抗锯齿渲染（anti-aliased rendering） PDF创建，展示，解析（这部分不在这个系列之中） 配合Core Animation, OpenGL ES,UIKit完成复杂的功能

---

画板－The Graphics Context

既然提到绘图，那自然有一个容器来包含绘制的结果，然后把这个结果渲染到屏幕上去，而Quartz 2D的容器就是CGContextRef数据模型。这种数据模型是C的结构体，存储了渲染到屏幕上需要的一切信息。
那么，最后 Graphics Context 可以渲染到哪里呢？

Layer Window 打印机 PDF Bitmap（图片）

---

绘制模型

Quartz 2D采用painter’s model,意味着每一次绘制都是一层，然后按照顺序一层层的叠加到画板上。例如

---

数据类型

Quartz 2D中的数据类型都是透明的，也就是说用户只需要使用即可，不需要实际访问其中的变量。具体的数据类型包括

CGPathRef 路径类型，用来绘制路径（注意带有ref后缀的一般都是绘制的画板） CGImageRef，绘制bitmap CGLayerRef，绘制layer，layer可复用，可离屏渲染 CGPatternRef，重复绘制 CGShadingRef和CGGradientRef，绘制渐变（例如颜色渐变） CGFunctionRef，定义回调函数，CGShadingRef和CGGradientRef的辅助类型 CGColorRef and CGColorSpaceRef，定义如何处理颜色 CGFontRef，绘制文字 其他类型（pdf这个系列不讲解，所以不会涉及）

---

绘制状态

在使用quartz 2d进行绘图的时候，经常需要设置颜色，字体，设置context的坐标原点变换，context旋转。这些影响的都是当前绘制状态。Context中利用堆栈的方式来保存绘制状态。调用CGContextSaveGState来保存当前绘制状态的copy到堆栈中，利用CGContextRestoreGState弹出堆栈最顶层的绘制状态，设置为当前的绘制状态。注意，不是所有的参数都会保存，以下表格中的参数会保存

---

坐标系

和UIKit的坐标系不一样，Quartz 2D的坐标系是在左下角的。

Quartz利用坐标系的旋转位移等操作来绘制复杂的动画。
但是有两个地方的坐标系是正常的UIKit坐标系

UIView 的context 通过这个方法UIGraphicsBeginImageContextWithOptions返回的context

---

一个简单的Demo讲解

新建一个UIView的子类，然后重写drawRect

- (void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetFillColorWithColor(context, [UIColor lightGrayColor].CGColor);
    CGContextFillRect(context, rect);//先填充整个区域
    CGRect testRect = CGRectMake(10, 10, 20, 20);
    CGContextAddRect(context, testRect);
    CGContextSetFillColorWithColor(context, [UIColor blueColor].CGColor);//修改画笔颜色
    CGContextFillRect(context, testRect);//填充部分区域
}

然后，这样调用

    LeoDemoView * demoView = [[LeoDemoView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
    [self.view addSubview:demoView];

效果

可以看到坐标系是正常的UIKit坐标系

然后，我们在在上面绘制一个文字”Leo”,在上述drawRect的最后添加，

  NSString * toDraw = @Leo;
    [toDraw drawAtPoint:CGPointMake(CGRectGetWidth(rect)/2, CGRectGetHeight(rect)/2) withAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:12],NSForegroundColorAttributeName:[UIColor greenColor]}];

可以看到，绘制是一层一层覆盖的，

最后，我们在右下角绘制一个红心，但是希望红心是反过来的。这里用到了上文的所说的绘制状态堆栈。继续在drawRect的最后添加如下代码

    CGContextSaveGState(context);
    CGContextTranslateCTM(context,rect.size.width,rect.size.height);
    CGContextRotateCTM(context, M_PI);
    NSString * redHeart = @??;//MarkDown 显示不出红心
    [redHeart drawAtPoint:CGPointMake(0, 0) withAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:15]}];

    CGContextRestoreGState(context);
}

效果

这里，初学者可能不懂到底是怎么回事了。我通过图解的方式一步步解释

这行代码把坐标系移动到右下角
CGContextTranslateCTM(context,rect.size.width,rect.size.height);
如图

接着把坐标系逆时针旋转180度

    CGContextRotateCTM(context, M_PI);

这时候的坐标系

这时候，参考这个坐标系进行绘制，看到的就是反过来的。哇咔咔！

---