iOS繪圖框架CoreGraphics分析
由於CoreGraphics框架有太多的API,對於初次接觸或者對該框架不是十分了解的人,在繪圖時,對API的選擇會感到有些迷茫,甚至會覺得iOS的圖形繪制有些繁瑣。因此,本文主要介紹一下iOS的繪圖方法和分析一下CoreGraphics框架的繪圖原理。
一、繪圖系統簡介
iOS的繪圖框架有多種,我們平常最常用的就是UIKit,其底層是依賴CoreGraphics實現的,而且絕大多數的圖形界面也都是由UIKit完成,並且UIImage、NSString、UIBezierPath、UIColor等都知道如何繪制自己,也提供了一些方法來滿足我們常用的繪圖需求。除了UIKit,還有CoreGraphics、Core Animation,Core Image,OpenGL ES等多種框架,來滿足不同的繪圖要求。各個框架的大概介紹如下:
-
UIKit:最常用的視圖框架,封裝度最高,都是OC對象
-
CoreGraphics:主要繪圖系統,常用於繪制自定義視圖,純C的API,使用Quartz2D做引擎
-
CoreAnimation:提供強大的2D和3D動畫效果
-
CoreImage:給圖片提供各種濾鏡處理,比如高斯模糊、銳化等
-
OpenGL-ES:主要用於遊戲繪制,但它是一套編程規範,具體由設備制造商實現
繪圖系統
二、繪圖方式
實際的繪圖包括兩部分:視圖繪制和視圖布局,它們實現的功能是不同的,在理解這兩個概念之前,需要了解一下什麽是繪圖周期,因為都是在繪圖周期中進行繪制的。
繪圖周期:
-
iOS在運行循環中會整合所有的繪圖請求,並一次將它們繪制出來
-
不能在子線程中繪制,也不能進行復雜的操作,否則會造成主線程卡頓
1.視圖繪制
調用UIView的drawRect:方法進行繪制。如果調用一個視圖的setNeedsDisplay方法,那麽該視圖就被標記為重新繪制,並且會在下一次繪制周期中重新繪制,自動調用drawRect:方法。
2.視圖布局
調用UIView的layoutSubviews方法。如果調用一個視圖的setNeedsLayout方法,那麽該視圖就被標記為需要重新布局,UIKit會自動調用layoutSubviews方法及其子視圖的layoutSubviews方法。
在繪圖時,我們應該盡量多使用布局,少使用繪制,是因為布局使用的是GPU,而繪制使用的是CPU。GPU對於圖形處理有優勢,而CPU要處理的事情較多,且不擅長處理圖形,所以盡量使用GPU來處理圖形。
三、繪圖狀態切換
iOS的繪圖有多種對應的狀態切換,比如:pop/push、save/restore、context/imageContext和CGPathRef/UIBezierPath等,下面分別進行介紹:
1.pop / push
設置繪圖的上下文環境(context)
push:UIGraphicsPushContext(context)把context壓入棧中,並把context設置為當前繪圖上下文
pop:UIGraphicsPopContext將棧頂的上下文彈出,恢復先前的上下文,但是繪圖狀態不變
下面繪制的視圖是黑色
- (void)drawRect:(CGRect)rect { [[UIColor redColor] setFill]; UIGraphicsPushContext(UIGraphicsGetCurrentContext()); [[UIColor blackColor] setFill]; UIGraphicsPopContext(); UIRectFill(CGRectMake(90, 340, 100, 100)); // black color }
2.save / restore
設置繪圖的狀態(state)
save:CGContextSaveGState 壓棧當前的繪圖狀態,僅僅是繪圖狀態,不是繪圖上下文
restore:恢復剛才保存的繪圖狀態
下面繪制的視圖是紅色
- (void)drawRect:(CGRect)rect { [[UIColor redColor] setFill]; CGContextSaveGState(UIGraphicsGetCurrentContext()); [[UIColor blackColor] setFill]; CGContextRestoreGState(UIGraphicsGetCurrentContext()); UIRectFill(CGRectMake(90, 200, 100, 100)); // red color }
3.context / imageContext
iOS的繪圖必須在一個上下文中繪制,所以在繪圖之前要獲取一個上下文。如果是繪制圖片,就需要獲取一個圖片的上下文;如果是繪制其它視圖,就需要一個非圖片上下文。對於上下文的理解,可以認為就是一張畫布,然後在上面進行繪圖操作。
context:圖形上下文,可以通過UIGraphicsGetCurrentContext:獲取當前視圖的上下文
imageContext:圖片上下文,可以通過UIGraphicsBeginImageContextWithOptions:獲取一個圖片上下文,然後繪制完成後,調用UIGraphicsGetImageFromCurrentImageContext獲取繪制的圖片,最後要記得關閉圖片上下文UIGraphicsEndImageContext。
4.CGPathRef / UIBezierPath
圖形的繪制需要繪制一個路徑,然後再把路徑渲染出來,而CGPathRef就是CoreGraphics框架中的路徑繪制類,UIBezierPath是封裝CGPathRef的面向OC的類,使用更加方便,但是一些高級特性還是不及CGPathRef。
四、具體繪圖方法
由於iOS常用的繪圖框架有UIKit和CoreGraphics兩個,所以繪圖的方法也有多種,下面介紹一下iOS的幾種常用的繪圖方法。
1.圖片類型的上下文
圖片上下文的繪制不需要在drawRect:方法中進行,在一個普通的OC方法中就可以繪制
使用UIKit實現
// 獲取圖片上下文 UIGraphicsBeginImageContextWithOptions(CGSizeMake(100,100), NO, 0); // 繪圖 UIBezierPath* p = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0,0,100,100)]; [[UIColor blueColor] setFill]; [p fill]; // 從圖片上下文中獲取繪制的圖片 UIImage* im = UIGraphicsGetImageFromCurrentImageContext(); // 關閉圖片上下文 UIGraphicsEndImageContext();
使用CoreGraphics實現
// 獲取圖片上下文 UIGraphicsBeginImageContextWithOptions(CGSizeMake(100,100), NO, 0); // 繪圖 CGContextRef con = UIGraphicsGetCurrentContext(); CGContextAddEllipseInRect(con, CGRectMake(0,0,100,100)); CGContextSetFillColorWithColor(con, [UIColor blueColor].CGColor); CGContextFillPath(con); // 從圖片上下文中獲取繪制的圖片 UIImage* im = UIGraphicsGetImageFromCurrentImageContext(); // 關閉圖片上下文 UIGraphicsEndImageContext();
2.drawRect:
在UIView子類的drawRect:方法中實現圖形重新繪制,繪圖步驟如下:
-
獲取上下文
-
繪制圖形
-
渲染圖形
UIKit方法
- (void) drawRect: (CGRect) rect { UIBezierPath* p = [UIBezierPathbezierPathWithOvalInRect:CGRectMake(0,0,100,100)]; [[UIColor blueColor] setFill]; [p fill]; }
CoreGraphics
- (void) drawRect: (CGRect) rect { CGContextRef con = UIGraphicsGetCurrentContext(); CGContextAddEllipseInRect(con, CGRectMake(0,0,100,100)); CGContextSetFillColorWithColor(con, [UIColor blueColor].CGColor); CGContextFillPath(con); }
3.drawLayer:inContext:
在UIView子類的drawLayer:inContext:方法中也可以實現繪圖任務,它是一個圖層的代理方法,而為了能夠調用該方法,需要給圖層的delegate設置代理對象,其中代理對象不能是UIView對象,因為UIView對象已經是它內部根層(隱式層)的代理對象,再將它設置為另一個層的代理對象就會出問題。
一個view被添加到其它view上時,圖層的變化如下:
-
先隱式地把此view的layer的CALayerDelegate設置成此view
-
調用此view的self.layer的drawInContext方法
-
由於drawLayer方法的註釋:If defined, called by the default implementation of -drawInContext:說明了drawInContext裏if([self.delegate responseToSelector:@selector(drawLayer:inContext:)])就執行drawLayer:inContext:方法,這裏我們因為實現了drawLayer:inContext:所以會執行
-
[super drawLayer:layer inContext:ctx]會讓系統自動調用此view的drawRect:方法,至此self.layer畫出來了
-
在self.layer上再加一個子layer,當調用[layer setNeedsDisplay];時會自動調用此layer的drawInContext方法
-
如果drawRect不重寫,就不會調用其layer的drawInContext方法,也就不會調用drawLayer:inContext方法
調用內部根層的drawLayer:inContext:
//如果drawRect不重寫,就不會調用其layer的drawInContext方法,也就不會調用drawLayer:inContext方法 -(void)drawRect:(CGRect)rect{ NSLog(@"2-drawRect:"); NSLog(@"drawRect裏的CGContext:%@",UIGraphicsGetCurrentContext()); //得到的當前圖形上下文正是drawLayer中傳遞過來的 [super drawRect:rect]; } #pragma mark - CALayerDelegate -(void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx{ NSLog(@"1-drawLayer:inContext:"); NSLog(@"drawLayer裏的CGContext:%@",ctx); // 如果去掉此句就不會執行drawRect!!!!!!!! [super drawLayer:layer inContext:ctx]; }
調用外部代理對象的drawLayer:inContext:
由於不能把UIView對象設置為CALayerDelegate的代理,所以我們需要創建一個NSObject對象,然後實現drawLayer:inContext:方法,這樣就可以在代理對象裏繪制所需圖形。另外,在設置代理時,不需要遵守CALayerDelegate的代理協議,即這個方法是NSObject的,不需要顯式地指定協議。
// MyLayerDelegate.m - (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx { CGContextAddEllipseInRect(ctx, CGRectMake(100,100,100,100)); CGContextSetFillColorWithColor(ctx, [UIColor blueColor].CGColor); CGContextFillPath(ctx); } // ViewController.m @interface ViewController () @property (nonatomic, strong) id myLayerDelegate; @end @implementation ViewController - (void)viewDidLoad { // 設置layer的delegate為NSObject子類對象 _myLayerDelegate = [[MyLayerDelegate alloc] init]; MyView *myView = [[MyView alloc] initWithFrame:self.view.bounds]; [self.view addSubview:myView]; CALayer *layer = [CALayer layer]; layer.backgroundColor = [UIColor magentaColor].CGColor; layer.bounds = CGRectMake(0, 0, 300, 500); layer.anchorPoint = CGPointZero; layer.delegate = _myLayerDelegate; [layer setNeedsDisplay]; [myView.layer addSublayer:layer]; }
詳細實現過程
當UIView需要顯示時,它內部的層會準備好一個CGContextRef(圖形上下文),然後調用delegate(這裏就是UIView)的drawLayer:inContext:方法,並且傳入已經準備好的CGContextRef對象。而UIView在drawLayer:inContext:方法中又會調用自己的drawRect:方法。平時在drawRect:中通過UIGraphicsGetCurrentContext()獲取的就是由層傳入的CGContextRef對象,在drawRect:中完成的所有繪圖都會填入層的CGContextRef中,然後被拷貝至屏幕。
iOS繪圖框架分析如上,如有不足之處,歡迎指出,共同進步。(本文圖片來自互聯網,版權歸原作者所有)
來源:http://www.cocoachina.com/ios/20170809/20187.html
iOS繪圖框架CoreGraphics分析