iOS繪畫系統

UIKit

這是頂層oc接口。它提供了方便的布局、合成、繪圖、字體、圖像、動畫等功能。UIKits的類使用UI前綴。

Core Graphics (通常叫Quartz 2D)

UIKit底層的主要繪畫系統,是view使用最頻繁的。Core Graphics高度集成在UIView和UIKit其它類內部,數據結構和函數使用CG前綴。

Core Animation

提供了強大的二維和三維動畫方法。高度集成在UIView中。

Core Image

一個第一次使用在iOS5上的Mac技術,提供非常高效的圖像處理,比如剪切,銳化,彎曲等其它你能想象到的轉換。

OpenGL ES

編寫3D游戲最常用,Open GL ES是OpenGL三維圖形API的子集。支持大多數平臺。對于大部分應用程序,Core Animation是更好的選擇。

UIKit和View的繪制生命周期

  • 所有的繪圖都在主線程完成。所以在主線程執行一段很長時間的操作,會阻止繪圖更新和事件處理(比如觸摸)。
  • 不能在后臺線程執行繪圖,因為UIKit是線程不安全的。如果要做一個很長時間的操作,可以使用dispatch或者opration queues來把你的大開銷的工作放到后臺,UIKit在主線程運行。

總結:iOS執行會之請求在runloop的同一時刻。做復雜的處理不要阻塞主線程,視圖的操作都在主線程完成

View繪圖(drawing) vs View布局(layout)

UIView從繪制drawing(or display)分離視圖布局layout(rearranging)。layout通常比drawing成本低,這可以提高性能。layout成本低,因為UIView在GPU優化后過的位圖緩存上進行繪圖操作,這些位圖可以被移動,顯示,隱藏,其他的轉換和符合操作很耗GPU。

  • View調用setNeedsDisplay后,在下一個runloop的繪圖周期內重畫。
  • UIKit調用setNeedsLayout方法,視圖的subviews會重新排布。View調用layoutSubviews方法,在旋轉和滑動時使用會使界面更加平滑。所以選擇重新布局layout而非重繪drawing他們。

一般的視圖繪制方法

2D繪圖不包括操作單個像素。你可以獲得位圖上下文,而不是直接用UIKit或Core Graphics方法。
UIKit和Core Graphics用一個“painter”繪畫模型。這意味著按照順序每個繪畫命令,覆蓋之前的繪畫。順序在模型中非常重要,你必須從后到前繪畫。

Drawing with UIKit

在iPhone0S3.2之后,蘋果增加了UIBezierPath使繪畫容易與之前。UIKit仍然缺乏支持線、漸變、陰影和一些高級的功能,如控制抗鋸齒和精確的色彩管理。即便如此,UIKit是現在最方便方式用來處理最常見繪圖的需要。

最常見的是用UIRectFrame或UIRectFill繪畫舉行。代碼如下:

- (void)drawRect:(CGRect)rect {
  [[UIColor redColor] setFill];
  UIRectFill(CGRectMake(10, 10, 100, 100));
}

注意,第一次繪畫設置顏色。在調用drawRect之前,畫布已經通過系統完成一個圖形上下文。這個上下文包括一些包括顏色,字體等信息。在任何時間只有一個描邊筆和一個填充筆,他們的顏色用來畫所有內容。

Paths

UIBezierPath有簡單的數據方法處理最常見的路徑,線、弧、矩形(可選圓形),橢圓形。
一個UIBezierPath只是一系列的曲線,像一個NSString是一個字符序列。只需要你填充曲線繪制的圖形上下文。

Understanding Coordinates
繪畫時,改變幾何對象到像素坐標。這些是一個可以被設置特別顏色的二位盒子。一個像素是設備可以控制的最小顯示單元區域。

Resizing and contentMode

iOS通過取得視圖快照和調整frame優化顯示視圖。drawRect方法不被調用,contentMode屬性決定視圖調整策略。

Transforms

iOS平臺可以非常快速地做矩陣運算。Transforms只是一個矩陣運算。
iOS有兩種transforms,仿射和3D。UIView處理只有仿射變換,Affine Transformation是一種二維坐標到二維坐標之間的線性變換,保持二維圖形的“平直性”(譯注:straightness,即變換后直線還是直線不會打彎,圓弧還是圓弧)和“平行性”(譯注:parallelness,其實是指保二維圖形間的相對位置關系不變,平行線還是平行線,相交直線的交角不變。)。仿射變換可以通過一系列的原子變換的復合來實現,包括:平移(Translation)、縮放(Scale)、翻轉(Flip)、旋轉(Rotation)和剪切(Shear)。

Drawing with Core Graphics

Core Graphics有時被叫做Quartz 2D或Quartz。是iOS主要的繪圖系統。它提供destination-independent繪圖,所以你可以用同樣的命令來繪圖到屏幕,層,位圖,pdf或打印機。Core Graphics相關的都以CG開頭。

Mixing UIKit and Core Graphics

UIKit使用ULO坐標系統,Core Graphics使用LLO坐標系統。
UIGraphicsGetCurrentContext里面的drawRect一切都很正常,因為這個context已經轉換。但如果你創建你自己的上下文使用CGBitmapContextCreate這樣的方法,它是LLO。你可以做數據轉換或者切換context。

Managing Graphics Contexts

在調用drawRect:,繪圖系統創建一個圖形上下文(CGContext)。一個上下文包含很多信息,比如一支筆顏色、文本顏色、當前字體、轉換等。有時你可能想要修改上下文,然后把它放回原位。例如,有一個函數來繪制特定顏色的特定形狀,但只有一只繪筆,所以當你改變顏色將同時改變你對其他繪圖的顏色。為避免副作用,你可以push和pop上下文使用CGContextSaveGState和CGContextRestoreGState。

優化方法

  1. 避免重繪
  • 適當使用contentMode使系統自動適應view。
  • 避免調用setNeedsDisplay,它會調用drawRect。
  1. 緩存和后臺繪圖
    如果繪圖時需要大量計算,緩存計算結果。通常最好的緩存位置是在CGLayer。許多緩存和提前的運算可以在后臺完成。
  2. 自定義繪圖預生成
  3. 像素對齊和模糊文本
  4. Alpha,Opaque,Hidden
  • alpha:有多少信息是顯示在像素中的在frame范圍內。
  • opaque:有多少不透明。
  • hidden:是否被畫,和alpha0一樣。
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,461評論 6 532
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,538評論 3 417
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,423評論 0 375
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,991評論 1 312
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,761評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,207評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,268評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,419評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,959評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,782評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,983評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,528評論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,222評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,653評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,901評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,678評論 3 392
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,978評論 2 374

推薦閱讀更多精彩內容