iOS绘图引擎之Quartz 2D第一篇

iOS中CoreGraphics框架是一个二维的绘制引擎，通常被称作Quartz 2D，Quartz 2D可以与其他的图形框架结合工作例如：CoreAnimation,OpenGL ES 和 UIKit。

图形上下文 Graphics Context

就像我们在实际中进行绘画需要纸张一样，在Quartz 2D绘制时，我们需要为绘制过程提供一个绘制目标，并将绘图信息输入到这个地方，我们称这个绘制目标为图形上下文（Graphics Context），这个图形上下文保存了用于绘制图片到指定设备时的相关信息，通俗来说，如果我需要将绘制结果保存在位图那么我们需要一个与位图相关的图形上下文，如果需要将绘制结果保存在PDF中，那么就需要一个PDF相关的图形上下文。有以下集中图形上下文：

1. bitmap graphics context，可以为你提供一个绘制位图的图形上下文。
2. PDF graphics context，可以为你提供一个创建PDF文件的图形上下文。
3. window graphic context，可以为你提供一个在窗口中绘制的图形上下文（maxOS）。
4. layer context，给另一个图形上下文做离屏渲染的目标，并将layer层绘制到图形上下文中（由于在layer中进行绘制时，会尽可能在显卡中进行数据的缓存，所以比bitmap graphics context性能更好一些）。
5. PostScript graphics context ，打印时的图形上下文。

Quartz 2D的数据类型

Quartz 2D 定义了很多的数据类型(Opaque Data Types)，Quartz 2D 由这些数据类型创建对象，并将其输出到图形上下文上。通过这些绘制数据类型，我们可以对其进行相关的操作（旋转、位移、缩放、阴影等）。

1. CGPathRef 矢量图，用来绘制路径，可以进行填充和描边。
2. CGImageRef 被用来呈现位图，
3. CGLayerRef 被用来呈现一个可以重复绘制的图层。
4. CGPatternRef 被用来重复绘制（通常指有规律的图形）。
5. CGShadingRef 和 CGGradienRef 使用填充渐变颜色。
6. CGFunctionRef 定义一个函数，该函数接受任意数量的浮点型指针参数，用于渐变颜色作为阴影时可以使用这个函数。
7. CGColorRef 和 CGColorSpaceRef 用来通知Quartz颜色信息和颜色坐标空间。
8. 还有其他的数据类型可以查看相关文档。

绘制状态

图形上下文包含一个图形状态信息的堆栈，当图形上下文刚被创建时，这个堆栈是空的。图形上下文会根据这个堆栈中的状态信息决定如何绘制，这些状态包括线宽、线条的颜色、样式、填充颜色、字体大小、混合模式等，在绘制的时候，会将这些状态信息应用到绘制的数据类型。需要注意的是，一旦一个数据对象（例如CGPathRef）被绘制，该对象的状态信息就不能改变了，例如如下代码：

CGContextRef ref = UIGraphicsGetCurrentContext();
CGContextMoveToPoint(ref, 100, 100);
CGContextAddLineToPoint(ref, 200, 200);
CGContextSetLineWidth(ref, 10); // 1
CGContextSetRGBStrokeColor(ref, 0, 0, 0, 1);
CGContextStrokePath(ref); // 2
CGContextSetLineWidth(ref, 2); // 3
UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
self.layer.contents = (__bridge id _Nullable)(img.CGImage);

1处的代码设置线宽为10，2调用CGContextStrokePath表示在点（100，100）和点（200，200）间绘制一条线，该线的宽度为10，颜色为黑色，绘制完成后，path对象就被清除。当再次更改线宽例如3处代码，但是此时由于这条线已经被绘制到图形上下文了，所以只是简单的修改了图像上下文中的状态，但不会对已经绘制的信息进行修改。
CGContextSaveGState 会将当前图像上下文的状态堆栈拷贝一份压入栈顶。
CGContextRestoreGState 恢复保存之前的状态堆栈。
如下图所示在调用CGContextSaveGState、CGContextRestoreGState之后图形状态的堆栈：

图1

1. 在调用CGContextSaveGState之前图形堆栈的状态信息如图①所示。
2. 在调用CGContextSaveGState后，会将堆栈里的内容拷贝一份push入栈，图②所示。
3. 设置堆栈中的状态信息设置dash为{0，0，0}，设置线条颜色为蓝色，线宽为1，如图③所示。
4. 调用CGContextRestoreGState恢复之前的状态信息。

Quartz 2D坐标系统

Quartz 2D坐标系统与UIKit的坐标系统不同，如下图所示：

图2

Quartz 2D的坐标系统原点在左下角处，如图①所示，y按照向上增长，x按照向右侧增长，而UIKit坐标系统远点在左上角，y轴按照向下增长。为了能够在不同设备上正确显示，Quartz 采用一种变换矩阵来映射用户坐标空间和设备的坐标空间，变换矩阵能够高效的描述一系列相关的等式。放射矩阵是一种特殊的变换矩阵，通过采用位移、旋转、缩放等操作将坐标点从一个坐标空间映射到另一个。由于Quartz 2D与UIKit的坐标空间不同，从UIKit获得的图形上下文需要做坐标空间的映射，通常对y-coordinate的scale乘以-1，幸运的是，UIKit框架会帮我们做这件事情。通过UIGraphicsBeginImageContextWithOptions获取的上下文也会做这种变换，所以不需要单独做坐标空间的映射。