1. 程式人生 > >iOS繪圖框架CoreGraphics分析

iOS繪圖框架CoreGraphics分析

png 保存 alloc opengl-es div 運行 dell .html shc

由於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分析