iOS 绘图 Quartz 2D

简介：

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

Quartz 2D 能完成的工作

绘制图形 : 线条 \ 三角形 \ 矩形 \ 圆 \ 弧等

绘制文字

绘制 \ 生成图片 ( 图像 )

读取 \ 生成 PDF

截图 \ 裁剪图片

自定义 UI 控件

在iOS开发中的价值：

有些 UI 界面极其复杂、而且比较个性化，用普通的 UI 控件无法实现，这时可以利用 Quartz2D 技术将控件内部的结构画出来，自定义控件的样子

iOS 中大部分控件的内容都是通过 Quartz2D 画出来的

因此， Quartz2D 在 iOS 开发中很重要的一个价值是：自定义 view （自定义 UI 控件）

图形上下文：

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

图形上下文的作用：

保存绘图信息、绘图状态

决定绘制的输出目标（绘制到什么地方去？） （ 输出 目标 可以 是 PDF 文件、 Bitmap 或者显示器的窗 口上）

相同的一套绘图序列， 指定不同的 GraphicsContext ，就可将相同的图像绘制到 不同的目标上

Quartz2D 提供了以下几种类型的GraphicsContext

Bitmap Graphics Context （位图上下文）

PDF Graphics Context（打印机上下文）

Window Graphics Context  window上下文（在mac上用的） 

Layer Graphics Context 图层上下文(iphone上用的 )

Printer Graphics Context打印机上下文）

如何利用Quartz2D自定义view？

如何利用 Quartz2D 绘制东西到 view 上？

首先，得有图形上下文，因为它能保存绘图信息，并且决定着绘制到什么地方去

其次，那个图形上下文必须跟 view 相关联，才能将内容绘制到 view 上面

自定义 view 的步骤：

1.新建一个类，继承自 UIView

2.实现 - ( void )drawRect:( CGRect )rect 方法，然后在这个方法中

3.取得跟当前 view 相关联的图形上下文

4.绘制相应的图形内容

5.利用图形上下文将绘制的所有内容渲染显示到 view 上面

- (void)drawRect:(CGRect)rect

必须在自定义的View里实现这个方法， 因为在 drawRect: 方法中才能取得跟 view 相关联的图形上下文
默认只会在view第一次显示的时候调用(只能由系统自动调用, 不能手动调用)- (void)drawRect:(CGRect)rect 图层上下文在这个方法中获取， 其他地方无法获取

 当然 也可以在其他地方调用这个 view 的 setNeedsDisplay 或者 setNeedsDisplayInRect: 方法进行重新绘画。

Quartz2D的API

Quartz2D 的 API 是纯 C 语言的

Quartz2D 的 API 来自于 Core Graphics 框架

数据类型和函数基本都以 CG 作为前缀

CGContextRef

CGPathRef

CGContextStrokePath (ctx) ;

在 drawRect: 方法中取得上下文后，就可以绘制东西到 view 上

View 内部有个 layer （图层）属性， drawRect: 方法中取得的是一个 Layer Graphics Context ，因此，绘制的东西其实是绘制到 view 的 layer 上去了

View 之所以能显示东西，完全是因为它内部的 layer

画直线

1. 获得图形上下文

 CGContextRef context=UIGraphicsGetCurrentContext();

2. 拼接路径

 CGContextMoveToPoint(context,10,10);   添加一个起点

 CGContextAddLineToPoint(context,100,100); 从起点到这个点的线段

3. 绘制路径

 CGContextStrokePath (context) ;

画矩形

 void CGContextAddRect(CGContextRefc,CGRect rect)

画椭圆

 void CGContextAddEllipseInRect(CGContextRefcontext,CGRect rect)

画圆弧

 void CGContextAddArc(CGContextRefc,CGFloatx,CGFloaty,

 CGFloat radius,CGFloat startAngle,CGFloat endAngle,int clockwise)

 x\y : 圆心  radius : 半径  startAngle : 开始角度  endAngle : 结束角度 clockwise : 圆弧的伸展方向(0:顺时针, 1:逆时针)

画文字

[string drawAtPoint:CGPointMake(50, 50) withAttributes:@{NSFontAttributeName: [UIFont systemFontOfSize:30]}];
  两种方法  [string drawInRect:CGRectMake(50, 50, 100, 100) withAttributes:dictionary];   

画图片

[image drawAtPoint:CGPointMake(50, 50)]; 这个方法是按照原本的大小 
[image drawInRect:CGRectMake(0, 0, 150, 150)]; 这个方法是填充   
[image drawAsPatternInRect:CGRectMake(0, 0, 200, 200)];  这一个是填补。

贝塞尔曲线

 CGContextAddQuadCurveToPoint(ctx, controlX, controlY, endX, endY);   
中间两个是控制点的坐标， 最后两个是结束点的坐标。       弧度根据控制点距离两端的长度变化。

关闭路径(连接起点和最后一个点)  

 CGContextClosePath(ctx);

绘制空心路径

 void CGContextStrokePath(CGContextRefc)

绘制实心路径

 void CGContextFillPath(CGContextRefc)

CGContextDrawPath(context,kCGPathStroke);

表示填充的模式

设置线段的宽度  CGContextSetLineWidth(context, 10);

设置线段头尾部的样式    CGContextSetLineCap(context, kCGLineCapRound);

设置线段转折点的样式   CGContextSetLineJoin(context, kCGLineJoinRound);

图形上下文栈

将ctx拷贝一份放到栈中 
 CGContextSaveGState(ctx);
将栈顶的上下文出栈,替换当前的上下文 
 CGContextRestoreGState(ctx);    
即把图形上下文的基本状态存到栈上， 方便下次用。

矩阵操作(一般放在前面)

 CGContextRotateCTM(ctx, M_PI_4 * 0.3);      让图形上下文里面画的内容旋转
 CGContextScaleCTM(ctx, 0.5, 0.5);     让画出来的图都缩放 
 CGContextTranslateCTM(ctx, 0, 150);  平移

裁剪图片(放在图形的后面， 渲染的前面）

 CGContextClip(context); 这一种需要在上面给给定裁剪的范围 可以是圆 矩形 什么的(根据紧挨着这行代码的上面的范围进行裁剪)
 CGContextClipToRect(context, CGRectMake(50, 50, 20, 20)); 在矩形里裁剪