概念部分
Core Graphics:
利用Quartz技術(shù),以高保真的輸出進(jìn)行輕量級(jí)二維渲染绞佩∷屡福基于路徑的繪制處理,抗鋸齒渲染品山、漸變笆载、圖像凉驻、色彩管理效诅、PDF文檔,以及更多褐荷。
Core Graphics 是基于Quartz高級(jí)繪圖引擎。它提供了低水平的輕量級(jí)2D渲染,具有無與倫比的輸出保真度毁菱。你用這個(gè)框架來處理基于路徑的繪制究西、變換卤材、色彩管理遮斥、屏幕繪制,圖案扇丛,漸變和陰影的圖像數(shù)據(jù)管理、圖像創(chuàng)作较屿、圖像掩模卓练,以及PDF文檔的創(chuàng)建吝镣、顯示昆庇、和解析闸溃。
在MacOS整吆,核心圖形還包括與顯示硬件工作服務(wù)表蝙,低級(jí)別的用戶輸入事件和視窗系統(tǒng)。
傳送陣:https://developer.apple.com/documentation/coregraphics
根據(jù)蘋果的描述乓旗,UIKit是我們最容易也是最常接觸到的框架府蛇。絕大多數(shù)圖形界面都由UIKit完成。但是UIKit依賴于Core Graphics框架屿愚,也是基于Core Graphics框架實(shí)現(xiàn)的汇跨。如果想要完成某些更底層的功能或者追求極致的性能务荆,那么依然推薦使用Core Graphics完成。
Core Graphics和UIKit在實(shí)際使用中也存在以下這些差異:
Core Graphics其實(shí)是一套基于C的API框架穷遂,使用了Quartz作為繪圖引擎函匕。這也就意味著它不是面向?qū)ο蟮摹?br>
Core Graphics需要一個(gè)圖形上下文(Context)。所謂的圖形上下文(Context)蚪黑,說白了就是一張畫布盅惜。這一點(diǎn)非常容易理解,Core Graphics提供了一系列繪圖API忌穿,自然需要指定在哪里畫圖抒寂。因此很多API都需要一個(gè)上下文(Context)參數(shù)。
Core Graphics的圖形上下文(Context)是堆棧式的掠剑。只能在棧頂?shù)纳舷挛模ó嫴迹┥袭媹D屈芜。
Core Graphics中有一些API,名稱不同卻有著相似的功能澡腾,新手只需要掌握一種沸伏,并能夠看懂其他的即可。
Quartz:
允許用戶瀏覽动分、編輯和保存圖像毅糟,使用幻燈片和Core Image的過濾器。
這個(gè)文檔集合為Quartz framework提供了API參考澜公,特別是對(duì)于Quartz Composer姆另、Image Kit和PDFKit。Quartz Composer API支持處理和渲染圖形數(shù)據(jù)坟乾,并允許開發(fā)人員為Quartz Composer 開發(fā)工具創(chuàng)建自定義補(bǔ)丁程序迹辐。Image Kit提供瀏覽、用戶界面支持編輯和保存圖像甚侣,顯示幻燈片瀏覽明吩,預(yù)覽圖像濾波器的核心。PDF Kit 是一種允許應(yīng)用程序顯示和操作PDF文檔的技術(shù)殷费。
Quartz 2D:
Quartz 2D以PDF的規(guī)范為基礎(chǔ)的圖形庫印荔,用來繪制二維文字和圖形,允許相同的繪圖指令在任何裝置上详羡,使用可以得到的最佳分辨率仍律,產(chǎn)生相同的輸出
Quartz 2D API可以實(shí)現(xiàn)許多功能,如基于路徑的繪圖实柠、透明度水泉、陰影、顏色管理、反鋸齒草则、PDF文檔生成和PDF元數(shù)據(jù)訪問等
Quartz 2D API是Core Graphic框架的一部分钢拧,因此其中的很多數(shù)據(jù)類型和方法都是以CG開頭的。會(huì)經(jīng)常見到Quartz 2D(Quartz)和Core Graphics兩個(gè)術(shù)語交互使用
Quartz 2D與分辨率和設(shè)備無關(guān)畔师,因此在使用Quartz 2D繪圖時(shí)娶靡,無需考慮最終繪圖的目標(biāo)設(shè)備
圖形和圖像:
圖形:以路徑的方式描述的一個(gè)形狀,在應(yīng)用程序運(yùn)行時(shí)看锉,實(shí)時(shí)繪制(渲染/Rending)的形狀
圖像:是以二進(jìn)制數(shù)據(jù)的形式描述的一塊像素點(diǎn)陣姿锭,在應(yīng)用程序運(yùn)行時(shí),直接將該像素點(diǎn)陣逐一繪制在屏幕上
#所以不難看出圖形的性能一般都會(huì)比圖像高
正題
綜上所述伯铣,我們了解到Core Graphics 主要通過 Quartz 2D 繪圖引擎來繪制的呻此,繪制流程如下:
- 獲取上下文 Context(畫布)
- 創(chuàng)建路徑(自定義或者調(diào)用系統(tǒng)的API)并添加到上下文中。
- 進(jìn)行繪圖內(nèi)容的設(shè)置(畫筆顏色腔寡、粗細(xì)焚鲜、填充區(qū)域顏色、陰影放前、連接點(diǎn)形狀等)
- 開始繪圖(CGContextDrawPath)
- 釋放路徑(CGPathRelease)
Graphics Context
A Quartz 2D drawing destination.
- Graphics Context是一個(gè)數(shù)據(jù)類型(CGContextRef)忿磅,封裝了Quartz繪制圖像到輸出設(shè)備的信息。輸出設(shè)備可以是PDF文件凭语、Bitmap或者顯示器的窗口上葱她。Graphics Context定義了基本的繪制屬性,如顏色似扔、裁減區(qū)域吨些、線條寬度和樣式信息、字體信息炒辉、混合模式等
- Quartz中所有的對(duì)象都是繪制到一個(gè)Graphics Context中
- 當(dāng)用Quartz繪圖時(shí)豪墅,所有設(shè)備相關(guān)的特性都包含在Graphics Context中。換句話說黔寇,我們可以簡(jiǎn)單地給Quartz繪圖序列指定不同的Graphics Context偶器,就可將相同的圖像繪制到不同的設(shè)備上。而不需要任何設(shè)備相關(guān)的計(jì)算缝裤,這些都由Quartz替我們完成
指定不同的上下文便可以在不同的設(shè)備上繪圖状囱,上下文種類:
1.Bitmap Graphics Context
2.PDF Graphics Context
3.Window Graphics Context
4.Layer Graphics Context
5.Printer Graphics Context
Core Graphics 基本使用
// 重寫drawRect:方法
// 并不是說一提到繪圖,就一定得重寫drawRect方法倘是,只是因?yàn)橥ǔG闆r下我們一般采用在drawRect方法里獲取context這種方式。
// drawRect方法什么時(shí)候觸發(fā)
// 1.當(dāng)view第一次顯示到屏幕上時(shí)袭艺;
// 2.當(dāng)調(diào)用view的setNeedsDisplay或者setNeedsDisplayInRect:方法時(shí)搀崭。
- (void)drawRect:(CGRect)rect{
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 繪制線段
CGContextMoveToPoint(ctx, 20, 80); // 起點(diǎn)
CGContextAddLineToPoint(ctx, self.frame.size.width-10, 80); //終點(diǎn)
[[UIColor redColor] set]; // 兩種設(shè)置顏色的方式都可以
CGContextSetLineWidth(ctx, 2.0f); // 線的寬度
CGContextSetLineCap(ctx, kCGLineCapRound); // 起點(diǎn)和重點(diǎn)圓角
CGContextSetLineJoin(ctx, kCGLineJoinRound); // 轉(zhuǎn)角圓角
CGContextStrokePath(ctx); // 渲染(直線只能繪制空心的,不能調(diào)用CGContextFillPath(ctx);)
// 繪制三角形
CGContextMoveToPoint(ctx, 10, 150);
CGContextAddLineToPoint(ctx, 60, 100);
CGContextAddLineToPoint(ctx, 100, 150);
[[UIColor purpleColor] set];
CGContextClosePath(ctx);
CGContextStrokePath(ctx);
// 繪制矩形
CGContextAddRect(ctx, CGRectMake(20, 170, 100, 50));
[[UIColor orangeColor] set];
CGContextFillPath(ctx);
// 繪制圓弧
CGContextAddArc(ctx, 200, 170, 50, M_PI, M_PI_4, 0);
CGContextClosePath(ctx);
CGContextFillPath(ctx);
// 繪制橢圓 當(dāng)寬高相等時(shí) 則為圓
CGContextAddEllipseInRect(ctx, CGRectMake(10, 10, 50, 50));
[[UIColor greenColor] set];
CGContextFillPath(ctx);
// 繪制文字
NSString *str = @"hello world";
NSMutableDictionary *dict = [NSMutableDictionary dictionary];
dict[NSForegroundColorAttributeName] = [UIColor blackColor]; // 文字顏色
dict[NSFontAttributeName] = [UIFont systemFontOfSize:14]; // 字體
[str drawInRect:CGRectMake(20, 250, 300, 30) withAttributes:dict];
// 繪制圖片
UIImage *img = [UIImage imageNamed:@"0B4846F9F76FEA53591D637427CBCC98.gif"];
[img drawInRect:CGRectMake(20, 280, 80, 80)]; // 拉伸
// 繪制可控曲線
CGContextMoveToPoint(ctx, 50, 130);
// 一個(gè)控制點(diǎn)
CGContextAddQuadCurveToPoint(ctx, 0, 100, 25, 170);
// 兩個(gè)控制點(diǎn)
CGContextAddCurveToPoint(ctx, 160, 250, 230, 250, 160, 290);
CGContextSetLineWidth(ctx, 10);
CGContextSetStrokeColorWithColor(ctx, [UIColor brownColor].CGColor);
CGContextStrokePath(ctx);
// 陰影 只影響此行代碼之后繪制的圖形
CGContextSetShadowWithColor(ctx, CGSizeMake(5, 10), 0.5, [UIColor redColor].CGColor);
// 繪制漸變
// 1. 輻射漸變
// start point 光源
// end point 投影區(qū)域以此為中心,向四周輻射
// 開始點(diǎn)和結(jié)束點(diǎn)構(gòu)成了一個(gè)帶有方向的直線向量
// gradientLocations 漸變顏色的區(qū)間分布瘤睹,locations的數(shù)組長(zhǎng)度和colors一致升敲。這個(gè)屬性可不設(shè),默認(rèn)是nil轰传,系統(tǒng)會(huì)平均分布顏色如果有特定需要可設(shè)置驴党,數(shù)組設(shè)置為0 ~ 1之間單調(diào)遞增。
// radius 輻射半徑
CGFloat gradientLocations[] = {0.8, 0.3,0.1,1};
CGContextDrawRadialGradient(ctx, CGGradientCreateWithColors(CGColorSpaceCreateDeviceRGB(), (__bridge CFArrayRef)[NSArray arrayWithObjects:(id)[UIColor whiteColor].CGColor,(id)[UIColor blackColor].CGColor,(id)[UIColor redColor].CGColor,(id)[UIColor blueColor].CGColor, nil], gradientLocations), CGPointMake(150, 150), 0, CGPointMake(150, 150), MAX(50, 50), 0);
// 2. 線性漸變
// KCGGradientDrawsAfterEndLocation 擴(kuò)展整個(gè)漸變到漸變的終點(diǎn)之后的所有點(diǎn)
// KCGGradientDrawsBeforeStartLocation擴(kuò)展整個(gè)漸變到漸變的起點(diǎn)之前的所有點(diǎn)获茬。
// 0不擴(kuò)展該漸變港庄。
CGContextDrawLinearGradient(ctx, CGGradientCreateWithColors(CGColorSpaceCreateDeviceRGB(), (__bridge CFArrayRef)[NSArray arrayWithObjects:(id)[UIColor whiteColor].CGColor,(id)[UIColor blackColor].CGColor,(id)[UIColor redColor].CGColor,(id)[UIColor blueColor].CGColor, nil], gradientLocations), CGPointMake(10, 10), CGPointMake(10, 50), 0);
}
Core Graphics 主要適用于封裝一些樣式比較獨(dú)特的view,或者繪制圖表等需求恕曲。雖然不屬于常用功能鹏氧,但是開發(fā)過程中難免會(huì)遇到一些問題或需求,到時(shí)候也多了一種解決問題的途徑佩谣,至于怎么解決方便把还,需要視情況而定。