Quartz2D实战-画板工具

2018-04-21 | 阅读：次

一直想让自己每天都能进步，但是学习这个事情一直都无法坚持，只有自己感觉到了紧迫感，才会敲起代码，研究自己以前没接触过的知识，写博客的目的就是希望能够和更多的朋友一起讨论，促进交流，共同进步！！！

什么是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);