iOS UI進階-1.0 Quartz2D

標籤：

概述Quartz 2D是一個二維繪圖引擎，同時支援iOS和Mac系統。Quartz 2D能完成的工作：

• 繪製圖形 : 線條\三角形\矩形\圓\弧等
• 繪製文字
• 繪製\產生圖片(映像)
• 讀取\產生PDF
• \裁剪圖片
• 自訂UI控制項

代碼實現繪製線條

#import "LineView.h"@implementation LineView-(void)drawRect:(CGRect)rect{    // Drawing code    // 1.獲得圖形上下文    CGContextRef ctx = UIGraphicsGetCurrentContext();        // 2.拼接圖形(路徑)    // 設定線段寬度    CGContextSetLineWidth(ctx, 10);        // 設定線段頭尾部的樣式（圓型）    CGContextSetLineCap(ctx, kCGLineCapRound);        // 設定線段轉折點的樣式（圓型）    CGContextSetLineJoin(ctx, kCGLineJoinRound);        /**  第1根線段  **/    // 設定顏色    CGContextSetRGBStrokeColor(ctx, 1, 0, 0, 1);    // 設定一個起點    CGContextMoveToPoint(ctx, 10, 10);    // 添加一條線段到(100, 100)    CGContextAddLineToPoint(ctx, 100, 100);        // 渲染顯示到view上面    CGContextStrokePath(ctx);            /**  第2根線段  **/    // 設定顏色    CGContextSetRGBStrokeColor(ctx, 0, 0, 1, 1);    // 設定一個起點    CGContextMoveToPoint(ctx, 200, 190);    // 添加一條線段到(150, 40)    CGContextAddLineToPoint(ctx, 150, 40);    CGContextAddLineToPoint(ctx, 120, 60);        // 渲染顯示到view上面    CGContextStrokePath(ctx);}@end

效果

繪製四邊形

/** *  畫四邊形 */void draw4Rect(){    // 1.獲得上下文    CGContextRef ctx = UIGraphicsGetCurrentContext();        // 2.畫矩形    CGContextAddRect(ctx, CGRectMake(10, 10, 150, 100));        // set : 同時設定為實心和空心顏色    // setStroke : 設定空心顏色    // setFill : 設定實心顏色    [[UIColor whiteColor] set];        // 3.繪製圖形    CGContextFillPath(ctx);}

繪製三角形

/** *  畫三角形 */void drawTriangle(){    // 1.獲得上下文    CGContextRef ctx = UIGraphicsGetCurrentContext();        // 2.畫三角形    CGContextMoveToPoint(ctx, 0, 0);    CGContextAddLineToPoint(ctx, 100, 100);    CGContextAddLineToPoint(ctx, 150, 80);    // 關閉路徑(串連起點和最後一個點)    CGContextClosePath(ctx);        // 顏色    CGContextSetRGBStrokeColor(ctx, 0, 1, 0, 1);        // 3.繪製圖形    CGContextStrokePath(ctx);}

繪製圓形和圓弧

/** *  畫圓弧 */void drawArc(){    // 1.獲得上下文    CGContextRef ctx = UIGraphicsGetCurrentContext();        // 2.畫圓弧    // x\y : 圓心    // radius : 半徑    // startAngle : 開始角度    // endAngle : 結束角度    // clockwise : 圓弧的伸展方向(0:順時針, 1:逆時針)    CGContextAddArc(ctx, 100, 100, 50, M_PI_2, M_PI, 0);        // 3.顯示所繪製的東西    CGContextFillPath(ctx);}/** *  畫圓 */void drawCircle(){    // 1.獲得上下文    CGContextRef ctx = UIGraphicsGetCurrentContext();        // 2.畫圓    CGContextAddEllipseInRect(ctx, CGRectMake(50, 10, 100, 100));        CGContextSetLineWidth(ctx, 10);        // 3.顯示所繪製的東西    CGContextStrokePath(ctx);}

常用方法拼接函數

// 建立一個起點void CGContextMoveToPoint(CGContextRef c, CGFloat x, CGFloat y)// 添加新的線段到某個點void CGContextAddLineToPoint(CGContextRef c, CGFloat x, CGFloat y)// 添加一個矩形void CGContextAddRect(CGContextRef c, CGRect rect)// 添加一個橢圓void CGContextAddEllipseInRect(CGContextRef context, CGRect rect)// 添加一個圓弧void CGContextAddArc(CGContextRef c, CGFloat x, CGFloat y,  CGFloat radius, CGFloat startAngle, CGFloat endAngle, int clockwise)// Mode參數決定繪製的模式void CGContextDrawPath(CGContextRef c, CGPathDrawingMode mode)// 繪製空心路徑void CGContextStrokePath(CGContextRef c)// 繪製實心路徑void CGContextFillPath(CGContextRef c)

提示：一般以CGContextDraw、CGContextStroke、CGContextFill開頭的函數，都是用來繪製路徑的

圖形上下文棧的操作

// 將當前的上下文copy一份,儲存到棧頂(那個棧叫做”圖形上下文棧”)void CGContextSaveGState(CGContextRef c)// 將棧頂的上下文出棧,替換掉當前的上下文void CGContextRestoreGState(CGContextRef c)

 

iOS UI進階-1.0 Quartz2D