Quartz 2D學習（一）簡單繪製圖形

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)的黑色矩形。

二、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

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

我們只需要在代碼中添加很簡單的兩行就可以回溯到初始的context。

---

參考：蘋果官方文檔