iOS UI 優(yōu)化 - Core Graphics

Core Graphics 實現(xiàn)探索

又是一個常用但是不知怎么開篇博文。??????

Core GraphicsiOS 整個架構(gòu)的層次結(jié)構(gòu)可以和上篇 Core Animation 實現(xiàn)闷游,這里僅僅展示 Core Graphics 實現(xiàn)的基礎實現(xiàn)架構(gòu)。

Core Graphics.png

在講解 Core Graphics 之前還是按照小編的??慣解阅,對該框架 API 的接口進行整理案铺。

屏幕快照 2019-03-16 20.43.18.png

作為基于 Quartz 的框架弧呐,上面 ?? 的 API 類型 CGTypeC 層面的繪圖引擎。主要在上面 Core Animation 探索 中驗證過程中位置參數(shù)士败、顏色值闯两、路徑以及圖像等等方面......
講真這個框架不知道怎么開筆,就按照上面 API 來各個闡述自己理解吧谅将。

Geometric Data Type

集合數(shù)據(jù)類型 表示 & 使用范圍
CGFloat(單精度浮點型) 1漾狼、 表示值類型的數(shù)據(jù)。iOS 中采用宏來進行定義饥臂,Swift 采用最長用的 Struct 來實現(xiàn)逊躁。 32 位 CPU 占 4 個字節(jié),64 位 CPU 占 8 個字節(jié)隅熙。2稽煤、iOS 開發(fā)過程中關(guān)于位置,寬高的參數(shù)均是采用此值類型囚戚。
CGPoint(二維坐標位置) 1酵熙、 表示值類型的點。點的基本參數(shù) x, y 均是 CGFloat 值類型參數(shù)驰坊。2匾二、 二維坐標中來確定控件位置布局中中心點、錨點等。
CGSize(控件大胁烀辍) 1皮璧、 表示值類型的尺寸。尺寸同樣是基本值類型參數(shù) width & height分飞。2悴务、 坐標中來基于當前控件在基于右上角、右下角或者是中心點控制點三者來確定控件的位置浸须〔沂伲可以根據(jù)在 Layer 確定布局時驗證中心點然后確定 Size 的參數(shù)可知。可以參考上一篇文章 Core Animation
CGRect(控件位置) 1删窒、 表示值類型的區(qū)域。區(qū)域的基本值類型參數(shù) Point & Size顺囊。2肌索、 是根據(jù) iOS 中右上角為坐標系根據(jù)初始化控件右上角參數(shù)類確定控件位置。
CGVector(二維向量坐標) 1特碳、 表示值類型向量中偏移诚亚。偏移的參數(shù) dx, dy 也均是 CGFloat 值類型參數(shù)。2午乓、 基于 SceneKitiOS 開發(fā)引擎來做剛體位置偏轉(zhuǎn)站宗。
CGAffineTransform(二維仿射變換) 1、 表示值類型仿射變換矩陣益愈。矩陣參數(shù) a, b, c, d, tx 和 ty 均為 Float 值類型梢灭。2、 UIKit 中基于 UIView 控件均有此參數(shù)蒸其,可以實現(xiàn)控件偏移敏释,旋轉(zhuǎn),縮放或者傾斜摸袁。微信讀書控件斜向動畫

注:上述沒有詳細講述其均為 Struct 值類型結(jié)構(gòu)

CGAffineTransform 使用

CGAffineTransform 初始化仿射變換初始化中顯示 CGAffineTransform.init(a: , b: , c: , d: , tx: , ty: ) 來作為 33* 的矩陣钥顽。

屏幕快照 2019-04-03 23.22.54.png

上面根據(jù)在仿射變換后坐標:
X 軸上的坐標 X`= ax + cy + tx, a 表示在 x 軸的縮放比例系數(shù),c 表示在 y 軸偏移系數(shù)在旋轉(zhuǎn)時使用靠汁, tx 是在當前坐標系的平移距離蜂大。

Y 軸上的坐標 Y`= bx + dy + ty, b 表示在 y 軸的縮放比例系數(shù),d 表示在 x 軸偏移系數(shù)在旋轉(zhuǎn)時使用蝶怔, ty 是在當前坐標系的平移距離奶浦。

所以下面的方式實現(xiàn)是 ==

let transFormTenPixel1 = CGAffineTransform.init(a: 0, b: 0, c: 0, d: 0, tx: 10, ty: 10)
let transFormTenPiexl2 = CGAffineTransform.init(translationX: 10, y: 10)
    
let transFormScaleTimes1 = CGAffineTransform.init(a: 2, b: 0, c: 0, d: 2, tx: 0, ty: 0)
let transFormScaleTimes2 = CGAffineTransform.init(scaleX: 2, y: 2)
    
let angle = Double.pi * 0.3
let transFormRotationAngle1 = CGAffineTransform.init(a: cos(angle), b: sin(angle), c: -sin(angle), d: cos(angle), tx: 0, ty: 0)
let transFormRotationAngle1 = CGAffineTransform.init(rotationAngle: angle)

2D Drawing

二維繪制 表示 & 使用的優(yōu)劣
CGContext(繪制渲染上下文) 1、 表示調(diào)用 Core Graphics 繪制上下文添谊。2财喳、 在繪制過程中獲取上下文 ContextMain Thread 中總是會回去 UIKit 堆棧的最上面,在后臺線程可以獲取當前上下文。根據(jù)獲取上下文的繪制目的可以實現(xiàn):PDF耳高、Bitmap扎瓶、WindowLayer泌枪、和 Printer概荷。
CGImage(位圖) 1、 表示位圖或者是位圖的 Mask碌燕。2误证、UIKitUIImage 對應的 CGType 類型,當前我們繪制或者對圖片進行截取后便是此類型修壕。
CGPath(路徑) 1愈捅、 表示繪制過程中繪制 Path2慈鸠、 同樣是對應在 UIKit 中對應 UIBerizerPathCGType 對應類型蓝谨。
CGMutablePath(可變路徑) 1、 表示路徑的可變類型青团。2譬巫、 CGPath 的可變類型結(jié)構(gòu)。
CGLayer(繪制渲染屏幕外圖形繪制畫布內(nèi)容) 1督笆、 表示在繪制渲染中依托的實際繪制畫布芦昔。2、 類似于在 Core AniationCALayer 作用效果娃肿,是繪制渲染上下文實際繪制載體咕缎。

注:上述沒有詳細講述其均為 Struct 值類型結(jié)構(gòu)

Colors | Font

色彩字體 表示 & 使用范圍
CGColor(顏色值) 1、 表示顏色值咸作。 2锨阿、 對應在 UIKitUIColor
CGColorConversionInfo(色彩轉(zhuǎn)換) 1记罚、 表示色彩多空間轉(zhuǎn)換墅诡。
CGColorSpace(顯示顏色值表達格式) 1、 表示顏色值在儲存中表達格式桐智。 2末早、iOS 可以采用的格式有:HSB: Hue, saturation, brightnessRGBRed, green, blue说庭、CMYKCyan, magenta, yellow, blackBGRBlue, green, red然磷。
CGFont(繪制文本信息) 1、 表示繪制文本詳細信息刊驴。 2姿搜、 在文本繪制過程中對應當前字體格式值寡润,對用在 Core AnimationUIFont

注:上述沒有詳細講述其均為 Struct 值類型結(jié)構(gòu)

Working with PDF Decument

色彩字體 表示 & 使用范圍
CGPDFDocument() 1舅柜、 梭纹。 2、 致份。
CATransaction() 1变抽、

Utility | Support Classes

多用途以及支持類 表示 & 使用范圍
CGDataConsumer() 1氮块、 绍载。 2、 滔蝉。
CGDataProvider() 1击儡、2锰提、 曙痘。
CGShading(陰影) 1、 表示設置陰影詳細信息立肘。 2、 對應 UIKitLayer 層中 Shadow 屬性來設置控件的陰影值名扛。
CGGradient(顏色漸變) 1谅年、 表示設置過渡色彩接口。 2肮韧、 對應在 CAGradientLayer 來實現(xiàn)顏色的效果過渡融蹂。
CGFunction(協(xié)助工具) 1、 表示在 CGType 方法中基礎事件回調(diào)弄企。 2超燃、 提供事件的基礎回調(diào)類似與我們在方法定義的 Block 實現(xiàn)。
CGPattern(模式) 1拘领、 表示繪制 2D 模型的一種模式意乓。 2、 约素。

此篇博文先停停.... 講真真心沒有思路届良。。圣猎。士葫。

未完待續(xù)。送悔。慢显。

參考資料:
繪制像素到屏幕上
Quartz 2D Programming Guide
Overview of Quartz 2D
Core Graphics
Core Graphics, Part 1: In the Beginning
Core Graphics, Part 2: Contextually Speaking
Core Graphics Tutorial: Patterns
Optimizing 2D Graphics and Animation Performance
Advanced Graphics and Animations for iOS Apps
Building Visually Rich User Experiences
Image and Graphics Best Practices
Practical Drawing for iOS Developers

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末爪模,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子荚藻,更是在濱河造成了極大的恐慌屋灌,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,734評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件鞋喇,死亡現(xiàn)場離奇詭異声滥,居然都是意外死亡,警方通過查閱死者的電腦和手機侦香,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,931評論 3 394
  • 文/潘曉璐 我一進店門落塑,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人罐韩,你說我怎么就攤上這事憾赁。” “怎么了散吵?”我有些...
    開封第一講書人閱讀 164,133評論 0 354
  • 文/不壞的土叔 我叫張陵龙考,是天一觀的道長。 經(jīng)常有香客問我矾睦,道長晦款,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,532評論 1 293
  • 正文 為了忘掉前任枚冗,我火速辦了婚禮缓溅,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘赁温。我一直安慰自己坛怪,他們只是感情好,可當我...
    茶點故事閱讀 67,585評論 6 392
  • 文/花漫 我一把揭開白布股囊。 她就那樣靜靜地躺著袜匿,像睡著了一般。 火紅的嫁衣襯著肌膚如雪稚疹。 梳的紋絲不亂的頭發(fā)上居灯,一...
    開封第一講書人閱讀 51,462評論 1 302
  • 那天,我揣著相機與錄音贫堰,去河邊找鬼穆壕。 笑死,一個胖子當著我的面吹牛其屏,可吹牛的內(nèi)容都是我干的喇勋。 我是一名探鬼主播,決...
    沈念sama閱讀 40,262評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼偎行,長吁一口氣:“原來是場噩夢啊……” “哼川背!你這毒婦竟也來了贰拿?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,153評論 0 276
  • 序言:老撾萬榮一對情侶失蹤熄云,失蹤者是張志新(化名)和其女友劉穎膨更,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體缴允,經(jīng)...
    沈念sama閱讀 45,587評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡荚守,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,792評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了练般。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片矗漾。...
    茶點故事閱讀 39,919評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖薄料,靈堂內(nèi)的尸體忽然破棺而出敞贡,到底是詐尸還是另有隱情,我是刑警寧澤摄职,帶...
    沈念sama閱讀 35,635評論 5 345
  • 正文 年R本政府宣布誊役,位于F島的核電站,受9級特大地震影響谷市,放射性物質(zhì)發(fā)生泄漏蛔垢。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,237評論 3 329
  • 文/蒙蒙 一迫悠、第九天 我趴在偏房一處隱蔽的房頂上張望啦桌。 院中可真熱鬧,春花似錦及皂、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,855評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至又跛,卻和暖如春碍拆,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背慨蓝。 一陣腳步聲響...
    開封第一講書人閱讀 32,983評論 1 269
  • 我被黑心中介騙來泰國打工感混, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人礼烈。 一個月前我還...
    沈念sama閱讀 48,048評論 3 370
  • 正文 我出身青樓弧满,卻偏偏與公主長得像,于是被迫代替她去往敵國和親此熬。 傳聞我的和親對象是個殘疾皇子庭呜,可洞房花燭夜當晚...
    茶點故事閱讀 44,864評論 2 354