【OC】Core Graphics

概念部分

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í)關(guān)系.png

根據(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 繪圖引擎來繪制的呻此,繪制流程如下:

  1. 獲取上下文 Context(畫布)
  2. 創(chuàng)建路徑(自定義或者調(diào)用系統(tǒng)的API)并添加到上下文中。
  3. 進(jìn)行繪圖內(nèi)容的設(shè)置(畫筆顏色腔寡、粗細(xì)焚鲜、填充區(qū)域顏色、陰影放前、連接點(diǎn)形狀等)
  4. 開始繪圖(CGContextDrawPath)
  5. 釋放路徑(CGPathRelease)
Graphics Context

A Quartz 2D drawing destination.

  1. Graphics Context是一個(gè)數(shù)據(jù)類型(CGContextRef)忿磅,封裝了Quartz繪制圖像到輸出設(shè)備的信息。輸出設(shè)備可以是PDF文件凭语、Bitmap或者顯示器的窗口上葱她。Graphics Context定義了基本的繪制屬性,如顏色似扔、裁減區(qū)域吨些、線條寬度和樣式信息、字體信息炒辉、混合模式等
  2. Quartz中所有的對(duì)象都是繪制到一個(gè)Graphics Context中
  3. 當(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í)候也多了一種解決問題的途徑佩谣,至于怎么解決方便把还,需要視情況而定。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末茸俭,一起剝皮案震驚了整個(gè)濱河市吊履,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌调鬓,老刑警劉巖艇炎,帶你破解...
    沈念sama閱讀 216,919評(píng)論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異袖迎,居然都是意外死亡冕臭,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,567評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門燕锥,熙熙樓的掌柜王于貴愁眉苦臉地迎上來辜贵,“玉大人,你說我怎么就攤上這事归形⊥锌” “怎么了?”我有些...
    開封第一講書人閱讀 163,316評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵暇榴,是天一觀的道長(zhǎng)厚棵。 經(jīng)常有香客問我,道長(zhǎng)蔼紧,這世上最難降的妖魔是什么婆硬? 我笑而不...
    開封第一講書人閱讀 58,294評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮奸例,結(jié)果婚禮上彬犯,老公的妹妹穿的比我還像新娘向楼。我一直安慰自己,他們只是感情好谐区,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,318評(píng)論 6 390
  • 文/花漫 我一把揭開白布湖蜕。 她就那樣靜靜地躺著,像睡著了一般宋列。 火紅的嫁衣襯著肌膚如雪昭抒。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,245評(píng)論 1 299
  • 那天炼杖,我揣著相機(jī)與錄音灭返,去河邊找鬼。 笑死嘹叫,一個(gè)胖子當(dāng)著我的面吹牛婆殿,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播罩扇,決...
    沈念sama閱讀 40,120評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼婆芦,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了喂饥?” 一聲冷哼從身側(cè)響起消约,我...
    開封第一講書人閱讀 38,964評(píng)論 0 275
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎员帮,沒想到半個(gè)月后或粮,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,376評(píng)論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡捞高,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,592評(píng)論 2 333
  • 正文 我和宋清朗相戀三年氯材,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片硝岗。...
    茶點(diǎn)故事閱讀 39,764評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡氢哮,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出型檀,到底是詐尸還是另有隱情冗尤,我是刑警寧澤,帶...
    沈念sama閱讀 35,460評(píng)論 5 344
  • 正文 年R本政府宣布胀溺,位于F島的核電站裂七,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏仓坞。R本人自食惡果不足惜背零,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,070評(píng)論 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望无埃。 院中可真熱鬧捉兴,春花似錦蝎困、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,697評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽澎埠。三九已至虽缕,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間蒲稳,已是汗流浹背氮趋。 一陣腳步聲響...
    開封第一講書人閱讀 32,846評(píng)論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留江耀,地道東北人剩胁。 一個(gè)月前我還...
    沈念sama閱讀 47,819評(píng)論 2 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像祥国,于是被迫代替她去往敵國和親昵观。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,665評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • 轉(zhuǎn)載請(qǐng)帶上出處, 謝謝. Quartz 2D是一個(gè)二維圖形繪制引擎, 它支持iOS環(huán)境和Mac OS X非內(nèi)核下的...
    Falme丶閱讀 919評(píng)論 0 3
  • --繪圖與濾鏡全面解析 概述 在iOS中可以很容易的開發(fā)出絢麗的界面效果舌稀,一方面得益于成功系統(tǒng)的設(shè)計(jì)啊犬,另一方面得益...
    韓七夏閱讀 2,727評(píng)論 2 10
  • 三維重建的常用方法: 1. 立體視覺方法(雙目觉至、多目立體),Structure from Motion 2. 光度...
    天然呆久必然萌兒閱讀 3,183評(píng)論 0 9
  • 我剛到北京的前兩年睡腿,有很長(zhǎng)一段時(shí)間是和一位姐姐合租语御。這位姐姐是我當(dāng)時(shí)女朋友的同事,二十八九歲席怪,北京本地人应闯。她快要結(jié)...
    安慶盧十四閱讀 673評(píng)論 0 1
  • 在我還小的時(shí)候,家鄉(xiāng)的小河溫婉可人何恶,每到夏日就有許多如我一樣的小屁孩泡在河里抓魚摸蝦回家打牙祭孽锥。 鄰村世良家因?yàn)橛?..
    知乎野風(fēng)閱讀 337評(píng)論 0 1