iOS開發-UI高階 Quartz 2D繪圖

A_StayFoolish發表於2016-08-09
1、Quartz 2D是一個二維圖形繪製引擎
· Quartz 2DAPI可以實現許多功能,如基於路徑的繪圖、透明度、陰影、顏色管理、反鋸齒、PDF文件生成和PDF後設資料訪問
· Quartz 2DAPI是Core Graphics框架的一部分
2、Core Graphics
· Core Graphic框架是一組基於C的API,可以用於一切繪圖操作
· 因為UIKit依賴於Core Graphics,所以當引入<UIKit/UIKit.h>時,Core Graphics框架會被自動引入
· UIKit內部封裝了Core Graphics的一些API,可以快速生成通用的介面元素
3、Graphics Context圖形上下文
· Graphics Context是一個資料型別(CGContextRef),封裝了Quartz繪製影像 到輸出裝置的資訊
· Quartz中所有的物件都是繪製到一個Graphics Context中
4、利用Quartz 2D繪製UIView

在UIView子類中重寫drawRect:

如以下程式碼是利用Quartz 2D繪製線條的簡單示例,繪製步驟一般為:

1. 獲取上下文

2. 建立繪製路徑

3. 設定繪製圖形屬性

4.  將路徑新增到上下文中

5. 渲染上下文

<strong><span style="font-size:14px;">-(void)drawRect:(CGRect)rect{
    
    // 獲取上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    [self drawLine:context];

}

-(void)drawLine:(CGContextRef)context{
    
    // 建立路徑
    CGMutablePathRef path = CGPathCreateMutable();
    // 設定起點
    CGPathMoveToPoint(path, NULL, 50, 50);
    
    // 設定目標點
    CGPathAddLineToPoint(path, NULL, 200, 200);
    // 設定連線線條
    CGPathAddLineToPoint(path, NULL, 50, 200);
    // 關閉路徑
    CGPathCloseSubpath(path);
    // 將路徑新增到上下文
    CGContextAddPath(context, path);
    // 設定填充顏色
    CGContextSetRGBFillColor(context, 180/255.0, 120/255.0, 110/255.0, 1);
    // 設定線條顏色
    CGContextSetRGBStrokeColor(context, 50/255.0, 60/255.0, 65/255.0, 1);
    // 設定線條寬度
    CGContextSetLineWidth(context, 10);
    // 渲染路徑
    CGContextDrawPath(context, kCGPathFillStroke);
    // 釋放路徑
    CGPathRelease(path);
}
</span></strong>

執行結果:



注意:1. 如果使用UIView繪圖,只能在drawRect:方法中獲取相應的CGContextRef 並繪圖。而在其他方法中獲取的CGContextRef不能用於繪圖
2. 重繪時應該呼叫setNeedsDisplay,而不能直接呼叫 drawRect:,setNeedsDisplay會自動呼叫drawRect:

相關文章