Core Graphics 的基本繪圖方式

這裡將 CoreGraphics (Quartz 2D) 的繪圖分成四大部份來介紹，分別式 Canvas 畫布的建立、Canvas 畫布的配置、繪圖和畫圖結束後的處理。（UIView subclass）

UIView subclass 的建立方式是在 Xcode 左上的 Group & Files（預設是在左上）內 Classes 資料夾按右鍵，選擇 Add > New File，並選擇 Cocoa Touch Class 的 Objective-C class 類型和 Subclass of UIView，最後按下 Next 就最會建立一個繼承 UIView的Subclass，如下圖所示。

建立好 Subclass 之後，還必須要與 ViewController 做連結，連結的的方式是在 Xcode 左上的 Group & Files 內 Resources 資料夾中點選 ViewController.xib 兩下，這時候系統會自動開啟 Interface Builder，在 Identity Inspector 中將 Class Identity 選到剛剛建立的 Subclass 名稱即可，如下圖。

在一切都設定好之後就可以開始繪圖，這裡示範的程式碼都寫在下列的函式中（Subclass內建）。

- (void)drawRect:(CGRect)rect
首先先來看看 Canvas 畫布的建立的方式，其程式碼如下。

//建立一個Graphic context並把狀態儲存起來
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSaveGState(context);

在這裡 context 就是所謂的 Canvas 畫布，在建立好 Canvas 畫布之後請記得將它儲存起來，因為 Canvas 畫布很有可能不是一次性的使用，隨著 frame 的不斷更新則會一直重複使用這個 Canvas 畫布。接下來將看 Canvas 畫布的配置方式。

//重新設定context的座標狀態，將它倒置使座標（0,0）在左下角
CGAffineTransform t = CGContextGetCTM(context);
t = CGAffineTransformInvert(t);
CGContextConcatCTM(context, t);

Canvas 畫布的配置部份，這裡是將整個畫布的座標倒置，使得 X、Y 座標（0,0）在左下角，當然隨著畫面的方向不同也也不同的配置方式，如要以旋轉角度來配置 Canvas 畫布，可以使用下列程式碼。

t = CGAffineTransformRotate(t, rotation);

在 Accelerometer / 加速器 / 重力控制器 / 水平儀的基本使用方法文章中，已經可以自動辨識 Device 的不同擺設狀況，其擺設狀況對應的角度如下。

UIDeviceOrientationPortraitUpsideDown: 180 degree rotation
UIDeviceOrientationLandscapeLeft: 90 degree rotation
UIDeviceOrientationLandscapeRight: –90 degree rotation
完成 Canvas 畫布配置之後就可以開始繪圖，繪圖的方式如下。

//顏色選擇（RGBA color model）並繪製矩形
CGContextSetRGBFillColor(context, 1, 1, 0, 1);
CGContextAddRect(context, CGRectMake(0, 0, 100, 200));

//結束context中的繪圖
CGContextClosePath(context);

//將context的內容繪出
CGContextDrawPath(context, kCGPathFill);

當然 Quartz 2D 提供了多種不同的繪圖方式，除了直接會出圖形之外，也可以使用點與線的方式畫出多邊形。

CGContextBeginPath(context);
CGContextSetRGBFillColor(context, 1, 1, 1, 1);
CGContextMoveToPoint(context, 310, 20);
CGContextAddLineToPoint(context, 280, 100);
CGContextAddLineToPoint(context, 150, 90);
CGContextAddLineToPoint(context, 310, 20);
CGContextClosePath(context);
CGContextDrawPath(context, kCGPathFill);

在完成繪圖之後，還有最後一個步驟就是將 Canvas 畫布保存起來，以便下次的使用。

//將context的內容保存
CGContextRestoreGState(context);