一直想让自己每天都能进步，但是学习这个事情一直都无法坚持，只有自己感觉到了紧迫感，才会敲起代码，研究自己以前没接触过的知识，写博客的目的就是希望能够和更多的朋友一起讨论，促进交流，共同进步！！！
什么是Quartz2D
Quartz2D的API是纯C语言的，它是一个二维绘图引擎，同时支持iOS和Mac系统。Quartz2D的API来自于Core Graphics框架，数据类型和函数基本都以CG作为前缀：CGContextRef、CGPathRef等。实际开发中UIKit框架能够帮我们完成大部分UI，但是有些UI比较复杂，普通的UIView无法满足我们的开发需要，这是就可以利用Quartz2D技术画出我们想要的控件。
DrawRect:
首先我们需要知道，- (void)drawRect:(CGRect)rect方法是在什么时候调用：
我们发现该方法是在视图即将展示的时候调用的，在这个方法中可以获取到上下文，将试图绘制到View上，其实每一个View内部都有一个layer属性，这个方法中就可以了取得一个layer,所以我们绘制的东西其实是绘制到View的layer上，试图之所以能够显示东西，就是因为他的内部有一个layer
所以之所以实现drawRect:方法，是因为，在这个方法当中可以获取到图形上下文，之后，才会View才会展示出来
- (void)drawRect:(CGRect)rect的调用时机：
- 当view第一次显示到屏幕上时（被加到UIWindow上显示出来）
- 调用view的
setNeedsDisplay或者setNeedsDisplayInRect:时
图形上下文（Graphics Context）
- 保存绘图信息、绘图状态
- 决定绘制的输出目标（绘制到什么地方去？）
- （输出目标可以是PDF文件、Bitmap或者显示器的窗口上）
- 相同的一套绘图序列，指定不同的Graphics Context，就可将相同的图像绘制到不同的目标上
绘制好的图形会保存到图像上下文中去，图像上下文中的绘制的图像又会显示在我们指定的输出目标当中
Quartz2D提供的几种上下文类型：
- Bitmap Graphics Context
- PDF Graphics Context
- Window Graphics Context
- Layer Graphics Context
- Printer Graphics Context
Quartz2D绘图的基本步骤
- 获得图形上下文
- 拼接路径（下面代码是搞一条线段，添加矩形、椭圆、圆弧的代码可以查看具体的APi，用法基本相同）
- 绘制路径
代码示例：
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextMoveToPoint(ctx, 10, 10);
CGContextAddLineToPoint(ctx, 100, 100);
CGContextStrokePath(ctx); // CGContextFillPath(ctx);
图形上下文栈的操作
将当前的上下文copy一份,保存到栈顶(那个栈叫做”图形上下文栈”，先进后出)
void CGContextSaveGState(CGContextRef c)
将栈顶的上下文出栈,替换掉当前的上下文
void CGContextRestoreGState(CGContextRef c)
Quartz2D的内存管理
- 使用含有“Create”或“Copy”的函数创建的对象，使用完后必须释放，否则将导致内存泄露
- 使用不含有“Create”或“Copy”的函数获取的对象，则不需要释放
- 如果retain了一个对象，不再使用时，需要将其release掉
- 可以使用Quartz 2D的函数来指定retain和release一个对象。例如，如果创建了一个CGColorSpace对象，则使用函数CGColorSpaceRetain和CGColorSpaceRelease来retain和release对象。
- 也可以使用Core Foundation的CFRetain和CFRelease。注意不能传递NULL值给这些函数
实战-画板工具
了解了Quartz2D的基本知识后，我们就可以运用这些知识，进行一些综合的练习.
主要代码如下
- 添加手势
UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];
[self addGestureRecognizer:pan];
实现方法：
- (void)pan:(UIPanGestureRecognizer *)pan{
// 获取当前位置所在点
CGPoint curP = [pan locationInView:self];
// 笔尖代码（这段代码可以去掉，主要是加了个笔尖，完善功能，提升用户体验）
{
//获取偏移量
//获取的偏移量是相对于最原始的点
CGPoint transP = [pan translationInView:self.pointView];
[self.pointView setAlpha:1.f];
CGFloat pointW = self.lineWidth + 5;
CGPoint pointP = CGPointMake(curP.x - pointW / 2, curP.y - pointW / 2);
[self.pointView setFrame:(CGRect){pointP, self.lineWidth + 5, self.lineWidth + 5}];
[self.pointView.layer setCornerRadius:self.pointView.bounds.size.width / 2];
[self.pointView.layer setBorderWidth:1.f];
[self.pointView.layer setBorderColor:self.lineColor.CGColor];
self.pointView.transform = CGAffineTransformTranslate(self.pointView.transform, transP.x, transP.y);
//清0操作(不让偏移量进行累加,获取的是相对于上一次的值,每一次走的值.)
[pan setTranslation:CGPointMake(0, 0) inView:self.pointView];
}
if (pan.state == UIGestureRecognizerStateBegan) {
ZJBezierPath *path = [ZJBezierPath bezierPath];
path.lineWidth = self.lineWidth;
path.lineJoinStyle = kCGLineJoinRound;
path.lineCapStyle = kCGLineCapRound;
path.lineColor = self.lineColor; // //颜色必须得要在drawRect方法当中进行绘制 继承系统类,添加属性我们自己的东西.
self.path = path;
//设置路径的起点
[self.path moveToPoint:curP];
[self.pathArray addObject:path];
} else if (pan.state == UIGestureRecognizerStateChanged){
//添加一根线到当前手指所在的点
[self.path addLineToPoint:curP];
[self setNeedsDisplay];
} else if (pan.state == UIGestureRecognizerStateEnded){
[self.pointView setAlpha:0.f];
}
}
代码里都有详细注释，下面主要讲解一些属性的设置区别：
lineJoinStyle：有三种样式
主要是线条的交接处的样式
typedef CF_ENUM(int32_t, CGLineJoin) {
kCGLineJoinMiter,
kCGLineJoinRound,
kCGLineJoinBevel
};
注意观察线条的连接处
kCGLineJoinMiter：
kCGLineJoinRound：
kCGLineJoinBevel
- 实现
- (void)drawRect:(CGRect)rect方法
- (void)drawRect:(CGRect)rect {
for (ZJBezierPath *path in self.pathArray) {
// 绘制路径
[path.lineColor set];
[path stroke];
}
我们发现我们并没有在该方法内部获取上下文、描述路径等操作就可以将路径绘制到view上去。重点看[path stroke]方法，其实这个方法内部已经帮我们实现了绘制视图的几个步骤：
- 获取上下文
- 描述路径
- 把路径添加到上下文
- 把上下文的内容渲染到View的layer
伪代码如下：
1. 获取上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
2. 描述路径
UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, 10, 10)];
3. 把路径添加到上下文
CGContextAddPath(ctx, path.CGPath);
4. 把上下文的内容渲染到View的layer
CGContextStrokePath(ctx);
代码地址
最终效果图
