iOS开发之自定义view—Quartz2D

最新推荐文章于 2021-11-10 11:58:38 发布

shxwork

最新推荐文章于 2021-11-10 11:58:38 发布

阅读量815

点赞数

分类专栏： iOS开发 iOS开发之UIKit 文章标签： ios开发 quartz 自定义控件实现画板涂鸦

本文链接：https://blog.csdn.net/shxwork/article/details/50134025

版权

iOS开发同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

iOS开发之UIKit

14 篇文章 0 订阅

订阅专栏

之前的文章介绍了数据的传递和存储，这篇文章就介绍显示数据的控件。iPhone之所以这么受欢迎，其中有一个原因是因为它的UI界面非常美观。iOS提供了UIKit框架，里面有各种各样的UI控件。

这里有利用Quartz2D生成的图片（包括裁剪圆形图片，截图，水印图片）:https://github.com/shihuaixing/ClipCircleImageDemo.git

UILabel：显示文字

UIImageVIew：显示图片

UIButton：同时显示图片和文字，还能点击

等等。

这些控件进行拼拼凑凑是能够搭建和实现一些简单、常见的UI界面，并显示数据的。

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

其实，iOS中大部分控件的内容都是通过Quarz2D画出来的。

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

我们来简单了解一下关于Quarz2D的知识。

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

Quarz2D的API是纯C语言的。

Quarz2D的API来自于Core Graphics框架

Quarz2D函数类型和函数基本都以CG为前缀：

CGContextRef

CGPathRef

CGContextStrokePath(ctx)

Quarz2D能完成的简单的工作：

1）绘制图形：线条/三角形/矩形/圆/弧等

2）绘制文字

3）绘制/生成图片

4）读取/生成PDF

5）图/裁剪图片

6）定义控件

7）等等

下面来看一下利用Quarz2D实现的一些效果：

1、图片裁剪:

2、手势解锁：

下面我们在使用Quarz2D之前，简单认识一些概念：

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

a. 作用：

保存绘图信息，绘图状态；

决定绘制的输出目标（绘制到什么地方）

（输出目标客源是PDF文件、Bitmap或者显示器的窗口上）

b. Quarz2D提供了以下几种类型的Graphics Context：

· Bitmap Graphics Context

· PDF Graphics Context

· Window Graphics Context

· Layer Graphics Context

· Printer Graphics Context

注意：图形上下文（Graphics Context）是一个很重要的类型！

了解了图形上下文（GraphicsContext），那我们如何利用Quarz2D自定义view（自定义控件）？

如何利用Quarz2D绘制内容到view上：

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

2）其次，那个图形上下文必须跟view想关联，才能讲内容绘制到view上

自定义view的步骤：

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

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

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

b. 绘制相应的图形内容

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

那大家可能会要问，为什么要实现drawRect:方法才能将绘图显示到view上呢？最重要的一点：因为在drawRect:方法中才能取到跟view相关联的图形上下文。

drawRect: 方法在什么时候被执行呢？

了解：

1）view内部有个layer（图层）属性,drawRect:方法中取得的是一个Layer GraphicsContext，因此，绘制的内容其实是绘制到view的layer上去了。

2）view之所以能显示东西，完全是因为它内部的layer（图层）

下面通过代码显示Quarz2D的功能：

创建新项目，在控制器view上拖一个自定义view（redView），创建自定义view类（HXView）。将自定义的view的类设置为HXView。

1、画线、画圆、画弧

- (void)drawBasisGraphics {
    
    /***************画线*****************/
    // 获得图形上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    // 画线
    // 1.起点
    CGContextMoveToPoint(ctx, 10, 10);
    // 添加线段
    CGContextAddLineToPoint(ctx, 100, 100);
    
    
    CGContextAddLineToPoint(ctx, 200, 30);
    
    // 设置线宽
    CGContextSetLineWidth(ctx, 10);
    // 设置线颜色
    CGContextSetRGBStrokeColor(ctx, 1, 0, 0, 1);
    // 设置两头部样式
    CGContextSetLineCap(ctx, kCGLineCapRound);
    // 设置连接处样式
    CGContextSetLineJoin(ctx, kCGLineJoinRound);
    
    // 渲染并显示到view上
    CGContextStrokePath(ctx);
    
    
    
    /***************画圆*****************/
    
    // 1.通过椭圆画出圆
    // 1)(不填充)
//    CGContextAddEllipseInRect(ctx, CGRectMake(0, 0, 100, 100));
//    
//    // 设置线宽
//    CGContextSetLineWidth(ctx, 10);
//    // 设置线颜色
//    CGContextSetRGBStrokeColor(ctx, 1, 0, 0, 1);
//    
//    // 渲染并显示到view上
//    CGContextStrokePath(ctx);
    
    // 2)(填充)
//    CGContextAddEllipseInRect(ctx, CGRectMake(0, 0, 100, 100));
//    
//    // 设置线颜色
//    CGContextSetRGBFillColor(ctx, 1, 0, 0, 1);
//    
//    // 渲染并显示到view上
//    CGContextFillPath(ctx);
    
    
    // 2.根据圆点、半径（可以画圆弧）
    // 1)不填充
    CGContextAddArc(ctx, 100, 100, 50, 0, M_PI_2, 0);
    // CGContextAddArc: 参数说明
    /*
     CGContextRef c：图形上下文
     CGFloat x, CGFloat y：圆点坐标
     CGFloat radius：圆的半径
     CGFloat startAngle：画圆的开始角度(逆时针为负，顺时针为正)
     CGFloat endAngle：画圆的结束角度
     int clockwise：画图方向，0：顺时针，1：逆时针
     */
    // 设置线颜色
    CGContextSetRGBStrokeColor(ctx, 1, 0, 0, 1);
    
    // 渲染并显示到view上
    CGContextStrokePath(ctx);
    
    // 2)填充
//    CGContextAddArc(ctx, 100, 100, 50, 0, M_PI_2, 0);
//    // 设置线颜色
//    CGContextSetRGBFillColor(ctx, 1, 0, 0, 1);
//    
//    // 渲染并显示到view上
//    CGContextFillPath(ctx);

    
    
    /***************画弧*****************/
    // 当前点
    CGContextMoveToPoint(ctx, 50, 100);
    CGContextAddCurveToPoint(ctx, 0, 0, 100, 100, 50, 0);
    
    // set : 同时设置为实心和空心颜色
    // setStroke : 设置空心颜色
    // setFill : 设置实心颜色
    [[UIColor whiteColor] set];
    
    CGContextStrokePath(ctx);
    
    
}

2、画图，并裁剪

// 画图
- (void)drawImage:(CGRect)rect {
    // 获得图形上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    UIImage *image = [UIImage imageNamed:@"008.jpg"];
    
//    [image drawAsPatternInRect:rect];// 平铺
//    [image drawInRect:rect]; // 拉伸
    [image drawAtPoint:CGPointMake(0, 0)];// 从父控件的0,0点开始画图
    
    // 渲染显示到view上
    CGContextStrokePath(ctx);
}

// 裁剪圆形图片
- (void)drawCircleImage:(CGRect)rect {
    // 获得图形上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    UIImage *image = [UIImage imageNamed:@"008.jpg"];
    
    // 1.画圆
    CGContextAddEllipseInRect(ctx, CGRectMake((rect.size.width - image.size.width) * 0.5, (rect.size.height - image.size.height) * 0.5, image.size.height, image.size.width));
    // 超出该圆的内容全部裁剪掉
    CGContextClip(ctx);// 裁剪当前图形上下文
    CGContextClipToRect(ctx, CGRectMake((rect.size.width - image.size.width) * 0.5, (rect.size.height - image.size.height) * 0.5, image.size.height, image.size.width)); // 裁剪范围
    
    // 画图
    [image drawAtPoint:CGPointMake((rect.size.width - image.size.width) * 0.5, (rect.size.height - image.size.height) * 0.5)];
    
    CGContextSetLineWidth(ctx, 10);
    // 渲染显示到view上
    CGContextStrokePath(ctx);
}

3、画文字(使用Quartz2D画出来的文字是反着的，跟坐标系有关)

- (void)drawText:(CGRect)rect {
    
    NSString *textString = @"哈哈哈哈shx";
    NSMutableDictionary *attris = [NSMutableDictionary dictionary];
    attris[NSFontAttributeName] = [UIFont systemFontOfSize:20];
    attris[NSForegroundColorAttributeName] = [UIColor whiteColor];
    [textString drawInRect:rect withAttributes:attris];
}

下面我们来做一个画板：

清空：清除画板上的所有内容；

回退：清除在画板上画出的最后一条线

创建新项目，在控制器view上拖一个自定义view（redView），创建自定义view类（HXView）。将自定义的view的类设置为HXView。

因为手指要在view上触摸才能有事件发生，所以要在HXView.m文件中重写如下方法：

/**
 *  手指开始触摸view的时候调用
 *  在该方法中可以确定线的起点
 */
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
	
}

/**
 *  手指在view上移动时调用
 *  在该方法中连接其他点
 */
- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    
}

/**
 *  手指触摸结束时候调用
 *  在该方法中处理一条路径画完之后的事情
 */
- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    
}

先来了解一下思路：

每当手指开始触摸view的时候就会调用touchesBegan方法，每次调用该方法时就创建一个新的路径（path：n个点组成），把touchesBegan获得的点（起点）添加到这条新的路径中（数组存储点）；当手指在view上移动的时候就会调用touchesMoved方法，每次调用该方法就会返回手指所在的位置，把该位置添加到path中；当手指在view上触摸结束的时候就会调用touchesEnded方法，在该方法中项path中添加最后的一个点。至此，path路径上的所有点都被存储在path中了。现在可以利用view的drawRect:方法开始绘制路径了。

由于画板可能会绘制很对条路径，所以我们也要把所有的路径存起来。（数组存储路径）

注意：每次向path中添加点的时候都要主动调用setNeedsDisplay方法，该方法会调用drawRect：方法随时绘制路径。

现在来实现这些方法

在touchesBegan方法中，能获得手指开始触摸时候的位置（一个路径的起点）

/**
 *  手指开始触摸view的时候调用
 *  在该方法中可以确定线的起点
 */
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    
    // 获得开始触摸的点（起点）
    CGPoint startPoint = [self pointWithTouch:touches];
    // 存储新路径上的所有的点
    NSMutableArray *currentPath = [NSMutableArray array];
    
    // 新路径存储新路径的第一个点（新路径起点）
    [currentPath addObject:[NSValue valueWithCGPoint:startPoint]];
    // 将新路径存储到数组中
    [self.paths addObject:currentPath];
    
    // 重新绘制
    [self setNeedsDisplay];
}

获得点的方法

- (CGPoint)pointWithTouch:(NSSet * )touches {
    UITouch *touch = [touches anyObject];
    CGPoint point = [touch locationInView:touch.view];
    return point;
}

手指开始移动：

/**
 *  手指在view上移动时调用
 *  在该方法中连接其他点
 */
- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    
    // 获取其他点
    CGPoint otherPoint = [self pointWithTouch:touches];
    
    
    // 取出最后一个路径（当前正在画的路径）
    NSMutableArray *currentPath = [self.paths lastObject];
    // 存储其他点
    [currentPath addObject:[NSValue valueWithCGPoint:otherPoint]];
    
    // 重新绘制
    [self setNeedsDisplay];
    
}

手指触摸事件结束：（考虑为什么只要调用touchesMoved方法）

/**
 *  手指触摸结束时候调用
 *  在该方法中处理一条路径画完之后的事情
 */
- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    
    // 手指离开后，也是连接点
    [self touchesMoved:touches withEvent:event];
    
}

回退功能（移除存储路径的数组的最后一个元素）：

- (void)revoke {
    [self.paths removeLastObject];
    [self setNeedsDisplay];   
}

清空功能（移除存储路径的数组的所有元素）；

- (void)clear {
    [self.paths removeAllObjects];
    [self setNeedsDisplay];
}

注意：每次改变路径内容的时候都要调用setNeedsDisplay方法！

效果：

回退：

清空：

只要自定义一个view，实现它的drawRect:方法，就可以在这个view上画出你想要的内容。大家可以试着实现以下前途的手势解锁功能的界面。（以上部分图片引用自mj老师）

shxwork

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录