Quartz 2D学习（一）简单绘制图形

2019年9月25日 153次阅读 来源: simon_chen

Quartz 2D学习（一）简单绘制图形

导语

Quartz 2D是一个二维图形绘制引擎，它支持iOS环境和Mac OS X环境，为开发者提供了很多方便，它在绘图上的功能十分强大，如基于路径的绘图、透明度、阴影、颜色管理、反锯齿、PDF文档生成等。Quartz 2D作为Core Graphics框架的一部分，其中的很多数据类型和方法都是以CG为前缀的。

本篇内容将介绍Graphis Context和绘制图形的基本流程。

一、Graphics Contexts

Graphics context（图形上下文）可以比喻成一个画板，你可以定义颜色属性，画笔粗细，画笔是直线还是曲线，然后最后开始绘制。
使用Quartz 2D绘图的关键步骤有：
1.调用CGContextRef获取上下文
2.调用CGContextRef的方法来进行绘图

基本流程如下

- (void)drawRect:(CGRect)rect {
    //获取上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    //设置颜色属性，设置填充颜色
    UIColor *blackColor = [UIColor
                           colorWithRed:0 green:0 blue:0 alpha:1];
    CGContextSetFillColorWithColor(context, blackColor.CGColor);
    
    //开始绘制
    CGContextFillRect(context, rect);
}

//我设置的rect.frame = CGRectMake(0, 100, 100, 100);

于是可以得到一个原点在(0, 100) 大小为(100, 100)的黑色矩形。
《Quartz 2D学习（一）简单绘制图形》

二、drawRect:

如果我们想要在iOS应用上绘制图形，就必须先申请一个UIView对象，然后实现drawRect:方法。
在视图显示在屏幕上时或者内容需要更新时，drawRect:方法会被调用。所以我们不需要手动去调用这个方法。手动更新内容的方法是setNeedsDisplay。
UIView对象的可以通过CGContextRef对当前的绘图环境进行配置，如上文提到的获取上下文，设置颜色属性，设置填充属性等。

三、简单的绘图操作

1. 基本绘图（实例1）

新建一个类继承自UIView，命名为Test。

//Test.h
#import <UIKit/UIKit.h>

@interface Test : UIView

@end   


//Test.m
#import "Test.h"

@implementation Test

- (void)drawRect:(CGRect)rect {
    //获取上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    //1.绘制三角形
    [self drawTriangle:context];
    
    //2.绘制矩形，圆形，椭圆
    [self drawOther:context];
}

- (void)drawTriangle:(CGContextRef) context {
    //1.添加绘图路径
    CGContextMoveToPoint(context, 100, 100);
    CGContextAddLineToPoint(context, 200, 100);
    CGContextAddLineToPoint(context, 150, 200);
    CGContextAddLineToPoint(context, 100, 100);
    
    //2.设置颜色属性
    //以下定义类似于
//    UIColor *redColor1 = [UIColor 
            colorWithRed:1.0 green:0.0 blue:0.0 alpha:1.0];
//    redColor1.CGColor
    CGFloat redColor[4] = {1.0, 0.0, 0.0, 1.0};
    CGFloat greenColor[4] = {0.0, 1.0, 0.0, 1.0};
    
    //3.设置描边颜色，填充颜色
    CGContextSetStrokeColor(context, redColor);
    CGContextSetFillColor(context, greenColor);
    
    //4.绘图
    CGContextDrawPath(context, kCGPathFillStroke);
}

- (void)drawOther:(CGContextRef) context {
    //添加一个矩形
    CGContextAddRect(context, CGRectMake(20, 100, 50, 50));
    //添加一个圆形
    CGContextAddEllipseInRect(context, CGRectMake(100, 200, 50, 50));
    //添加一个椭圆
    CGContextAddEllipseInRect(context, CGRectMake(100, 300, 50, 100));
    
    //绘图
    CGContextDrawPath(context, kCGPathFillStroke);
}


@end

《Quartz 2D学习（一）简单绘制图形》

2. context的保存

从实例1中可以看出在绘制其他图形时，我们并没有设置描边属性，填充颜色等，但是后来绘制的图形却和第一个相同。正如开头所述的，context就像一个画板，你选择了画笔颜色，填充颜色，那么你之后画的所有图形都会是这样的属性。
那能不能不重新设置属性就可以用之前的“画板”呢？
我们可以在设置属性前保存context，当画完第一个图形后，再读取出来。
此时要用到两个方法。
CGContextSaveGState(context); //将context推入上下文堆栈
CGContextRestoreGState(context); //从上下文堆栈取出context

//Test.h
#import <UIKit/UIKit.h>

@interface Test : UIView

@end   


//Test.m
#import "Test.h"

@implementation Test

- (void)drawRect:(CGRect)rect {
    //获取上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    //1.绘制三角形
    [self drawTriangle:context];
    
    //2.绘制矩形，圆形，椭圆
    [self drawOther:context];
}

- (void)drawTriangle:(CGContextRef) context {
    //保存context
    CGContextSaveGState(context);
    
    //1.添加绘图路径
    CGContextMoveToPoint(context, 100, 100);
    CGContextAddLineToPoint(context, 200, 100);
    CGContextAddLineToPoint(context, 150, 200);
    CGContextAddLineToPoint(context, 100, 100);
    
    //2.设置颜色属性
    //以下定义类似于
//    UIColor *redColor1 = [UIColor colorWithRed:1.0 green:0.0 blue:0.0 alpha:1.0];
//    redColor1.CGColor
    CGFloat redColor[4] = {1.0, 0.0, 0.0, 1.0};
    CGFloat greenColor[4] = {0.0, 1.0, 0.0, 1.0};
    
    //3.设置描边颜色，填充颜色
    CGContextSetStrokeColor(context, redColor);
    CGContextSetFillColor(context, greenColor);
    
    //4.绘图
    CGContextDrawPath(context, kCGPathFillStroke);
}

- (void)drawOther:(CGContextRef) context {
     //读取context
    CGContextRestoreGState(context);
    //添加一个矩形
    CGContextAddRect(context, CGRectMake(20, 100, 50, 50));
    //添加一个圆形
    CGContextAddEllipseInRect(context, CGRectMake(100, 200, 50, 50));
    //添加一个椭圆
    CGContextAddEllipseInRect(context, CGRectMake(100, 300, 50, 100));
    
    //绘图
    CGContextDrawPath(context, kCGPathFillStroke);
}

@end

《Quartz 2D学习（一）简单绘制图形》
我们只需要在代码中添加很简单的两行就可以回溯到初始的context。

参考：苹果官方文档

    原文作者：simon_chen
    原文地址: https://segmentfault.com/a/1190000004025309
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞