Quartz 2D绘图（1）初识

Quartz 2D介绍

什么是Quartz2D ？
- Quartz 2D是⼀个二维绘图引擎,同时支持iOS和Mac系统。

Quartz 2D能完成的工作？
- 绘制图形 : 线条\三角形\矩形\圆\弧形
- 绘制文字
- 绘制\生成图片(图像)
- 读取\生成PDF
- 截图\裁剪图片
- 自定义UI控件

其他需要了解的内容？
- Quartz 2D是纯C语言的
- Quartz 2D的API来自于CoreGraphics框架
- 数据类型和函数基本都是CG作为前缀
  - CGContextRef
  - CGPathRef
  - CGContextStrokePath（ctx）

使用Quartz2D绘图的基本步骤：
- 自定义view
- 重写drawRect方法
  - 1.获取图形上下文
  - 2.创建路径对象（添加路径）
  - 3.渲染

绘制基本图形

绘制一条线段：

获取图形上下文
移动到起点
添加另一点
渲染

// 1.获取图形上下文
CGContextRef cxtRef = UIGraphicsGetCurrentContext();

// 2.添加路径
// 起点
CGContextMoveToPoint(cxtRef, 100, 80);
// 另外一个点
CGContextAddLineToPoint(cxtRef, 200, 200);

// 3.渲染
CGContextStrokePath(cxtRef); // 仅仅画线

线段效果图

绘制线段.png

绘制2条线段

// 1.获取图形上下文
CGContextRef cxtRef = UIGraphicsGetCurrentContext();
// 2.添加路径
// 起点
CGContextMoveToPoint(cxtRef, 50, 50);
// 另外一个点
CGContextAddLineToPoint(cxtRef, 200, 100);
// 第2条线
CGContextAddLineToPoint(cxtRef, 40, 180);
// 3.渲染
CGContextStrokePath(cxtRef);

2条线效果图

绘制两条线段.png

注意：CGContextStrokePath(cxtRef);只是进行画线，CGContextFillPath(cxtRef)会将线围起来的部分全部画出

使用CGContextFillPath(cxtRef)的效果

fill的效果.png

绘制三角形

// 1.获取图形上下文
CGContextRef cxtRef = UIGraphicsGetCurrentContext();
// 2.添加路径
// 起点
CGContextMoveToPoint(cxtRef, 50, 50);
// 另外一个点
CGContextAddLineToPoint(cxtRef, 200, 50);
// 第2条线
CGContextAddLineToPoint(cxtRef, 125, 180);
// 再向起点连一条线
CGContextAddLineToPoint(cxtRef, 50, 50);
// 3.渲染
CGContextStrokePath(cxtRef); // 仅仅画线

三角形效果图

三角形.png

绘制其他基本图形

通过UIBezierPath绘制基本图形

注意：如果在绘制一部分图形后仍需要绘制图形，必须将前面的路径关闭，再重新开始绘制。

三角形及线段

// 1.获取图形上下文
CGContextRef cxtRef = UIGraphicsGetCurrentContext();

// 2.图形路径
UIBezierPath *bezierPath = [UIBezierPath bezierPath];
[bezierPath moveToPoint:CGPointMake(10, 10)];
[bezierPath addLineToPoint:CGPointMake(200, 200)];
[bezierPath addLineToPoint:CGPointMake(10, 250)];
[bezierPath addLineToPoint:CGPointMake(10, 10)];

// 2.1如果需要再绘制其他的图形就必须先把当前的路径关闭
[bezierPath closePath];

// 2.2.再绘制一条线段
[bezierPath moveToPoint:CGPointMake(250, 10)];
[bezierPath addLineToPoint:CGPointMake(250, 290)];

// 需要的是CGPathRef类型，可以通过.CGPath进行转换
CGContextAddPath(cxtRef, bezierPath.CGPath);
// 3.渲染
CGContextDrawPath(cxtRef, kCGPathStroke);


* 通过UIBezierPath绘制基本图形效果图</br>

![通过bezierPath绘制基本图形.png](http://upload-images.jianshu.io/upload_images/1988000-57b79968c4183195.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

#### 绘制矩形
```objc
// 1.获取图形上下文
CGContextRef ctxRef = UIGraphicsGetCurrentContext();

// 2.创建路径对象
UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(10, 10, 200, 100)];

// 3.将路径对象添加到"图形上下文"
CGContextAddPath(ctxRef, path.CGPath);

// 4.渲染
CGContextDrawPath(ctxRef, kCGPathStroke);

矩形效果图

绘制矩形.png

绘制圆角矩形

// 2.创建路径对象
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 10, 200, 100) cornerRadius:50];

圆角矩形效果图

绘制圆角矩形.png

绘制椭圆

// 2.创建路径对象
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 50, 200, 100)];

椭圆效果图

绘制椭圆.png

绘制圆弧

clockWise参数，代表绘制时YES:是逆时针绘制 NO:是顺时针绘制

// 2.创建路径对象
// 圆心
CGPoint center = CGPointMake(150, 150);
// 半径
CGFloat radius = 100;
// 开始角度
CGFloat startAngle = 0;
// 结束角度
CGFloat endAngle = M_PI_2;
// 是否为顺时针
BOOL clokcWise = NO;
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startAngle endAngle:endAngle clockwise:clokcWise];

圆弧效果图

绘制圆弧.png

绘制圆形

// 圆心
CGPoint center = CGPointMake(150, 150);
// 半径
CGFloat radius = 100;
// 开始角度
CGFloat startAngle = 0;
// 结束角度
CGFloat endAngle = M_PI * 2;
// 是否为顺时针
BOOL clokcWise = YES;
return [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startAngle endAngle:endAngle clockwise:clokcWise];

圆形效果图

绘制圆形.png

绘制常见图形

绘制扇形
绘制饼状图
绘制柱状图
绘制下载进度条

绘制扇形

需要绘制弧形，指定起始角度及结束角度

最后需要将弧形终点与圆心点连起来，再通过填充渲染就可以

// 1.获取图形上下文
CGContextRef cxtRef = UIGraphicsGetCurrentContext();

// 2.创建弧形的路径对象
// 圆心
CGPoint center = CGPointMake(rect.size.width * 0.5, rect.size.height * 0.5);
// 半径
CGFloat radius = MIN(rect.size.width, rect.size.height) * 0.5;

UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:0 endAngle:M_PI_4 clockwise:YES];

// 必须要将终点与圆形连线
[path addLineToPoint:center];

// 4.添加到图形上下文中
CGContextAddPath(cxtRef, path.CGPath);

// 5.渲染

// CGContextDrawPath(cxtRef, kCGPathStroke);
CGContextDrawPath(cxtRef, kCGPathFill);
```

扇形效果图

绘制扇形.png

绘制饼状图

数组数据
通过计算每个元素所占的比例

获取图形上下文
计算好圆心及半径
遍历集合数据进行绘制
计算每个扇形需要旋转的角度
创建路径对象进行绘制

注意：在绘制时，每个扇形的终止角度 = 上一个扇形的结束角度 + 当前扇形所需要的角度

每次遍历最后都需要将扇形的起始角度置为上一个扇形的结束角度

#pragma mark - 绘制饼状图
- (void)drawRect:(CGRect)rect {

    // 1.数据
    NSArray *data = @[@25, @15, @10, @5, @30, @10, @5];

    // 2.遍历数据进行求和
    int total = 0;
    for (NSNumber *number in data) {
        float num = number.floatValue;
        total += num;
    }
    // 3.进行绘图操作
    // 3.1获取图形上下文
    CGContextRef cxtRef = UIGraphicsGetCurrentContext();

    // 3.2遍历集合进行绘图操作
    // 圆心
    CGPoint center = CGPointMake(rect.size.width * 0.5, rect.size.height * 0.5);
    // 半径
    CGFloat radius = MIN(rect.size.width, rect.size.height) * 0.5;

    // 起始角度和结束角度
    // 注意：要在block内修改外部局部变量的值是必须要加__block进行修饰的
    __block CGFloat startAngle = 0;
    __block CGFloat endAngle = 0;

    // 遍历集合
    [data enumerateObjectsUsingBlock:^(NSNumber * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {

        // 转为float类型
        float num = obj.floatValue;

        // 计算单独一个数据结束角度，需要用它所占的角度 + 起始角度
        endAngle = (num / total) * (M_PI * 2) + startAngle;

        // 3.2.1创建路径对象
        UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startAngle endAngle:endAngle clockwise:YES];

        // 3.2.2将弧线的终点与圆心连接起来
        [path addLineToPoint:center];

        // 3.2.3使用随机色进行渲染
        [[UIColor colorWithRed:arc4random_uniform(256)/255.0 green:arc4random_uniform(256)/255.0 blue:arc4random_uniform(256)/255.0 alpha:1.0] set];

        // 3.2.4添加到图形上下文中
        CGContextAddPath(cxtRef, path.CGPath);

        // 3.2.5渲染
        CGContextDrawPath(cxtRef, kCGPathFill);

        // 3.2.6修改起始角度
        startAngle = endAngle;
    }];


    // 4.创建同心圆遮盖中间部分
    UIBezierPath *arcPath = [UIBezierPath bezierPathWithArcCenter:center radius:radius - 70 startAngle:0 endAngle:M_PI * 2 clockwise:YES];
    [self.backgroundColor setFill];

    CGContextAddPath(cxtRef, arcPath.CGPath);

    // 渲染
    CGContextDrawPath(cxtRef, kCGPathFill);

}

饼状图效果图

绘制饼状图.png

绘制柱状图

计算所占比例
获取图形上下文
计算宽度，遍历集合进行绘制

#pragma mark - 绘制柱状图
- (void)drawRect:(CGRect)rect {

    // 1.数据
    NSArray *data = @[@100, @200, @300, @700, @79, @400];

    // 2.遍历数据进行求和
    float total = 0;
    for (NSNumber *number in data) {
        float num = number.floatValue;
        total += num;
    }

    // 3.进行绘图操作
    // 3.1获取图形上下文
    CGContextRef cxtRef = UIGraphicsGetCurrentContext();

    // 3.2遍历集合进行绘图操作
    // 3.2.1计算宽度
    CGFloat width = rect.size.width / (data.count * 2 - 1);

    [data enumerateObjectsUsingBlock:^(NSNumber * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {

        // 计算高度
        CGFloat height = obj.floatValue / total * rect.size.height * 2;

        // 计算y
        CGFloat y = rect.size.height - height;
        // 计算x
        CGFloat x = (2 * width) * idx;

        // 创建路径对象
        UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(x, y, width, height)];

        // 添加到图形上下文中
        CGContextAddPath(cxtRef, path.CGPath);

        // 设置随机色
        [[UIColor colorWithRed:arc4random_uniform(256)/255.0 green:arc4random_uniform(256)/255.0 blue:arc4random_uniform(256)/255.0 alpha:1.0] set];

        // 渲染
        CGContextDrawPath(cxtRef, kCGPathFill);
    }];

}

柱状图效果图

绘制柱形图.png

绘制下载进度条

监听slider的滑动事件
将slider的值传递给自定义view
在自定义view中重写set方法，进行绘制
绘制时弧线的结束角度根据传入的进度值进行计算

#pragma mark - 绘制下载进度条
- (void)drawRect:(CGRect)rect {

    // 1.获取上下文
    CGContextRef cxtRef = UIGraphicsGetCurrentContext();

    // 2.创建路径对象
    // 圆心
    CGPoint center = CGPointMake(rect.size.width * 0.5, rect.size.height * 0.5);
    // 半径
    CGFloat radius = MIN(rect.size.width, rect.size.height) * 0.5;
    // 起点
    CGFloat startAngle = -M_PI_2;
    CGFloat endAngle = self.progress * M_PI * 2 - M_PI_2;

    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startAngle endAngle:endAngle clockwise:YES];

    [path addLineToPoint:center];

#pragma mark - 创建一个圆形，利用奇偶填充模式留出中间的空白处
//    UIBezierPath *path2 = [UIBezierPath bezierPathWithArcCenter:center radius:radius - 50 startAngle:startAngle endAngle:endAngle clockwise:YES];

//    [path2 addLineToPoint:center];

    // 3.添加到上下文中
    CGContextAddPath(cxtRef, path.CGPath);
//    CGContextAddPath(cxtRef, path2.CGPath);
    // 设置颜色
    [[UIColor brownColor] set];

    // 4.渲染
    CGContextDrawPath(cxtRef, kCGPathFill);
//    CGContextDrawPath(cxtRef, kCGPathEOFill);
}

下载进度条图效果图

绘制下载进度条.gif

图形上下文的矩阵操作

注意: 红色框为上下文的边界

旋转

#pragma mark - 旋转 CTM
    // 注意:是绕着左上角进行转动
    CGContextRotateCTM(cxtRef, M_PI_4);

旋转上下文

旋转.png

缩放


#pragma mark - 缩放 CTM
    // 注意:是以左上角为圆点缩放
    CGContextScaleCTM(cxtRef, 0.5, 0.5);

缩小上下文

缩放.png

平移

#pragma mark - 平移
    CGContextTranslateCTM(cxtRef, 200, -100);

平移上下文

平移.png

旋转缩放平移

旋转缩放平移.png

图形上下文栈介绍

在对图形上下文进行矩阵操作之前先将图像上下文最初的状态保存起来。保存的位置就是图形上下文的栈。
在需要原始状态的时候进行再回复原始的状态的。

   
#pragma mark - 矩阵操作
- (void)drawRect:(CGRect)rect {
    
    //获取图形上下文
    CGContextRef cxtRef = UIGraphicsGetCurrentContext();
    //MARK: - 在矩阵操作前保存图形上下文
    CGContextSaveGState(cxtRef);
    
#pragma mark - 旋转 CTM
    // 注意:是绕着左上角进行转动
    CGContextRotateCTM(cxtRef, M_PI_4);
    
#pragma mark - 缩放 CTM
    // 注意:是以左上角为圆点缩放
    CGContextScaleCTM(cxtRef, 0.5, 0.5);
    
#pragma mark - 平移
    CGContextTranslateCTM(cxtRef, 200, -100);  //为什么y值为0   和y值为-100   x值也会改变   缩放同时改变位置  位置会不准
    //创建路径
    //圆形
    UIBezierPath *roundPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(180, 150) radius:100 startAngle:0 endAngle:M_PI * 2 clockwise:YES];
    //矩形
    UIBezierPath *rectPath = [UIBezierPath bezierPathWithRect:CGRectMake(150, 280, 200, 100)];
    //直线
    UIBezierPath *linePath = [UIBezierPath bezierPath];
    [linePath moveToPoint:CGPointMake(50, 50)];
    [linePath addLineToPoint:CGPointMake(350, 400)];
    
    //添加路径
    CGContextAddPath(cxtRef, roundPath.CGPath);
    CGContextAddPath(cxtRef, rectPath.CGPath);
    CGContextAddPath(cxtRef, linePath.CGPath);
    
    //渲染
    CGContextDrawPath(cxtRef, kCGPathStroke);
    
    
    //MARK: - 在执行完毕矩阵操作以后，恢复上下文
    CGContextRestoreGState(cxtRef);
    
    //绘制与控制器视图大小相等的方框方便观察
    UIBezierPath *rectP = [UIBezierPath bezierPathWithRect:rect] ;
    //设置矩形的颜色
    [[UIColor redColor] setStroke];
    //设置矩形的线宽
    rectP.lineWidth = 10;
    
    [rectP stroke];
    
    
}

图形上下文的内存管理

CoreGraphics框架里面的使用到"create"和"copy","retain"函数创建的对象，最后都需要进行释放

// 1.获取上下文
CGContextRef cxtRef = UIGraphicsGetCurrentContext();

// 2.创建路径对象
CGMutablePathRef path = CGPathCreateMutable();


// 起点
CGPathMoveToPoint(path, NULL, 50, 50);

// 另一点
CGPathAddLineToPoint(path, NULL, 100, 100);


// 3.将路径对象添加到图形上下文中
CGContextAddPath(cxtRef, path);

// 4.渲染
CGContextDrawPath(cxtRef, kCGPathStroke);

// 5.释放
//    CGPathRelease(path);
#pragma mark - CoreGraphics框架里面的使用到"create"和"copy","retain"函数创建的对象，最后都需要进行释放
CFRelease(path);

绘制图片和文字

绘制图片

//1.加载图片
     UIImage *mjImage = [UIImage imageNamed:@"头像"];
     //2.1方式1 通过一个点开始绘制
     [mjImage drawAtPoint:CGPointMake(50, 50)];

通过一个点开始绘制.png

     //2.2方式2 通过某个区域绘制，可能会压缩或者拉伸图片，使图片不够美观
     [mjImage drawInRect:CGRectMake(50, 50, 100, 150)];

通过某个区域绘制.png


     //2.3方式3 在某个区域内以平铺的方式绘制图片
     [mjImage drawAsPatternInRect:CGRectMake(0, 0, 300, 300)];

在某个区域内以平铺的方式绘制图片.png

绘制文字



//字符串
    NSString *str = [NSString stringWithFormat:@"说好的不熬夜呢？"];
    
    NSDictionary *dic = @{
                          NSFontAttributeName : [UIFont systemFontOfSize:20],
                          NSForegroundColorAttributeName : [UIColor redColor]
                          };
    
    //方式1. 从某一个点开始绘制
    [str drawAtPoint:CGPointMake(50, 50) withAttributes:dic];

从某一个点开始绘制.png

    //方式2. 在某一个区域进行绘制  (会自动换行，但是区域不要小于字体所占面积大小)
    [str drawInRect:CGRectMake(150, 150, 80, 150) withAttributes:dic];

在某一个区域进行绘制.png

最后编辑于：2017.12.03 05:00:43

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 157,012评论 4赞 359
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 66,589评论 1赞 290
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 106,819评论 0赞 237
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 43,652评论 0赞 202
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 51,954评论 3赞 285
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,381评论 1赞 210
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,687评论 2赞 310
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,404评论 0赞 194
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,082评论 1赞 238
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,355评论 2赞 241
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 31,880评论 1赞 255
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,249评论 2赞 250
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 32,864评论 3赞 232
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,007评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,760评论 0赞 192
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,394评论 2赞 269
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,281评论 2赞 259

Quartz 2D绘图 （1）初识