Quartz2D实战-画板工具

时间:2022-05-03 11:43:23

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

什么是Quartz2D

Quartz2D的API是纯C语言的,它是一个二维绘图引擎,同时支持iOS和Mac系统。Quartz2D的API来自于Core Graphics框架,数据类型和函数基本都以CG作为前缀:CGContextRefCGPathRef等。实际开发中UIKit框架能够帮我们完成大部分UI,但是有些UI比较复杂,普通的UIView无法满足我们的开发需要,这是就可以利用Quartz2D技术画出我们想要的控件。

DrawRect:

首先我们需要知道,- (void)drawRect:(CGRect)rect方法是在什么时候调用:
Quartz2D实战-画板工具

我们发现该方法是在视图即将展示的时候调用的,在这个方法中可以获取到上下文,将试图绘制到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绘图的基本步骤

  1. 获得图形上下文
  2. 拼接路径(下面代码是搞一条线段,添加矩形、椭圆、圆弧的代码可以查看具体的APi,用法基本相同)
  3. 绘制路径

代码示例:

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的基本知识后,我们就可以运用这些知识,进行一些综合的练习.

主要代码如下

  1. 添加手势
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:
Quartz2D实战-画板工具

kCGLineJoinRound:
Quartz2D实战-画板工具

kCGLineJoinBevel
Quartz2D实战-画板工具

  1. 实现- (void)drawRect:(CGRect)rect方法
- (void)drawRect:(CGRect)rect {

    for (ZJBezierPath *path in self.pathArray) {

      // 绘制路径
      [path.lineColor set];
      [path stroke];
}

我们发现我们并没有在该方法内部获取上下文、描述路径等操作就可以将路径绘制到view上去。重点看[path stroke]方法,其实这个方法内部已经帮我们实现了绘制视图的几个步骤:

  1. 获取上下文
  2. 描述路径
  3. 把路径添加到上下文
  4. 把上下文的内容渲染到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);

代码地址

最终效果图

Quartz2D实战-画板工具