Quartz2D实战-画板工具

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

什么是Quartz2D

Quartz2D的API是纯C语言的,它是一个二维绘图引擎,同时支持iOS和Mac系统。Quartz2D的API来自于Core Graphics框架,数据类型和函数基本都以CG作为前缀:CGContextRefCGPathRef等。实际开发中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绘图的基本步骤

  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:

kCGLineJoinRound:

kCGLineJoinBevel

  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);

代码地址

最终效果图

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏落影的专栏

Metal入门教程(一)图片绘制

这里是一篇Metal新手教程,先定个小目标:把绘制一张图片到屏幕上。 Metal系列教程的代码地址; OpenGL ES系列教程在这里;

9545
来自专栏菩提树下的杨过

silverlight中"制作逐帧动画"/"播放gif"收集

“逐帧动画”与“播放GIF”貌似二个风马牛不相干的问题,其实不然! 因为silverlight中的image控件不支持直接把gif动画做为source,所以象做...

2107
来自专栏技术博客

Win8中缩放视图(SemanticZoom控件)

    SemanticZoom控件可以让用户缩放具有相同内容的两个不同视图。其中有一个是主视图。另外一个视图可以让用户进行快速导航。例如,当用户查看地址簿时,...

691
来自专栏Flutter&Dart

Flutter之WidgetsApp使用详解&与MaterialApp的纠缠

如果对MaterialApp不熟悉,可先看我上一篇文章: Flutter之MaterialApp使用详解

4303
来自专栏hotqin888的专栏

microstation vba起步——建立实体

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

1213
来自专栏JackieZheng

可视化工具solo show-----Prefuse自带例子GraphView讲解

  2014.10.15日以来的一个月,挤破了头、跑断了腿、伤透了心、吃够了全国最大餐饮连锁店——沙县小吃。其中酸甜苦辣,绝不是三言两语能够说得清道的明的。校招...

4926
来自专栏小灰灰

Java 借助ImageMagic实现图片编辑服务

Java 借助ImageMagic实现图片编辑服务 java原生对于图片的编辑处理并没有特别友好,而且问题也有不少,那么作为一个java后端,如果要提供图片的编...

7876
来自专栏程序员互动联盟

【专业文章】六种常见的HTML5写法误用(二)

四、figure元素的常见错误 figure以及figcaption的正确使用,确实是难以驾驭。让我们来看看一些常见的错误, 不是所有的图片都是figure 上...

2865
来自专栏闻道于事

IDEA快捷键

Editing方面: Ctrl+Space: Basic code completion(the name of any class,method or var...

2964
来自专栏macOS 开发学习

Mac开发跬步积累(四):ImageIO解析Gif 图像数据

这里可以看到Gif 是保存了多幅图像的一个图像文件,有了这个基础认识,我们就可以使用代码来解析Gif图像了.

1123

扫码关注云+社区

领取腾讯云代金券