iOS開發中 Quartz2D使用詳細 簡介

標籤：關閉   class   uart   直線   color   截屏   label   顏色   變換   

1> Quartz2D簡介

*  PPT簡介

    什麼是Quartz2D?二維的繪圖引擎

    什麼是二維?平面

    什麼是引擎?經封裝的函數庫，方便開發人員使用。也就是說蘋果幫我們封裝了一套繪圖的函數庫

    同時支援iOS和Mac系統什麼意思?用Quartz2D寫的同一份代碼，既可以運行在iphone上又可以運行在mac上，可以跨平台開發。

    開發中比較常用的是截屏/裁剪/自訂UI控制項。

    Quartz2D在iOS開發中的價值就是自訂UI控制項。

    圖形內容相關的資料類型和作用。

    有多少種上下文。

    自訂控制項的步驟。

    為什麼要實現drawRect:方法，因為只有在drawRect:方法中才能擷取到上下文

 

2> Quartz2D繪圖演練

    在哪畫? storyboard拖一個view，在這個view裡面畫一些東西。

    自訂view:需要繪圖，就必須重寫drawRect:方法

*   HMLineView:繪製線段 必須畫圖分析

    drawRect:方法自動產生，意味著什麼?這個方法很重要。

        1> 什麼時候調用:視圖要顯示的時候，才會調用,viewDidLoad後才會調用，因為那時候還沒顯示視圖。

        2> 作用:用來繪圖

    * 畫一條線

    1> 擷取圖形上下文

    CG:表示這個類在CoreGraphics架構裡  Ref:引用

    目前學的上下文都跟UIGraphics有關，想擷取圖形上下文，首先敲UIGraphics。

    2> 拼接路徑：一般開發中用貝塞爾路徑，裡面封裝了很多東西，可以幫我畫一些基本的線段，矩形，圓等等。

        建立貝塞爾路徑

        起點:moveToPoint

        終點:addLineToPoint

    3> 把路徑添加到上下文

        CGPath轉換：UIKit架構轉CoreGraphics直接CGPath就能轉

    4> 把上下文渲染到視圖，圖形上下文本身不具備顯示功能。

        PPT畫圖分析為什麼要這樣做?首先擷取圖形上下文，然後描述路徑，把路徑添加到上下文，渲染到視圖，圖形上下文相當於一個記憶體緩衝區，在記憶體裡面操作是最快的，比直接在介面操作快多了。

 

    * 在添加一根線

        直接addLineToPoint，因為路徑是拼接的，預設下一條線的起點是上一條線的終點。

 

    * 畫兩跟不串連的線

        1> 第二次畫的時候，重新設定起點，然後畫線。一個路徑可以包含多條線段。

        2> 新建立一個路徑，添加到上下文。開發中建議使用這種，比較容易控制每根線。

 

    * 設定繪圖狀態

        線段怎麼加粗。

        繪圖狀態調用順序：只要在渲染之前就好了，在渲染的時候才會去看繪圖的最終狀態。

 

    * 畫曲線

    PPT分析：3個點，起點，終點，控制點。

 

*   HMShapeView:繪製圖形

    * triangle三角形（畫圖分析）

    * 關閉路徑closePath：從路徑的終點串連到起點

    * 填充路徑CGContextFillPath：有了封閉路徑就能填充。

    * 設定填充顏色 [[UIColor blueColor] setFill];

    * 設定描邊顏色 [[UIColor redColor] setStroke];

    * 不顯示描邊顏色，為什麼?沒有設定線寬

    * 設定線寬，還是不顯示，為什麼?因為繪製路徑不對。

    * 即填充又描邊CGContextDrawPath:kCGPathFillStroke。

 

    * rectangle矩形

 

    * circle圓：為什麼傳入矩形，因為圓內切與矩形

 

    * arc圓弧

    PPT分析:

        1> 圓弧屬於圓的一部分，因此先要有圓，才有弧。

        2> 圓需要起點嗎？畫線需要，圓也不另外。

        3> 起點在哪? 圓心右邊

        4> 畫圓弧還需要起始角度，結束角度，方向，角度必須是弧度

 

 

    * Quarter 1/4圓

      * 畫個1/4圓弧，Stroke

      * 填充路徑，Fill

      * 必須有封閉路徑才能填充，沒有封閉路徑，系統會自動關閉路徑，再去填充

      * 畫線串連圓心，自動關閉路徑。

    

 

 

2.1 基本圖形繪製:

    先畫PPT在寫代碼

    講解順序: 繪製線段(Line)：繪製直線->在添加一條直線->繪製兩條直線(路徑填充、設定路徑屬性，顏色，線寬等)->曲線->分析

    講解順序: 繪製圖形(Shape)：繪製三角形(超人內褲)->矩形->圓->圓弧->1/4圓

 

3>  重繪-下載進度條(setNeedsDisplay) 必須畫圖分析

    * 分析有幾個控制項：UISliderView,自訂view用來畫圖,UILabel

    * 分析思路：滑動UISliderView的時候，把UISliderView的值傳給自訂view,改變的顯示。

    * 怎麼監聽UISliderView，valueChange事件

    * 自訂view搞一個屬性接收滑動的值

    * 接下來先搞label,因為他比較簡單，做東西，先從簡單的著手。

    * 懶載入label,位置置中，文字置中

    * label怎麼顯示?重寫progress的set方法,有資料就展示在label上。

    * 繪製圓弧，PPT分析，從哪開始畫圓弧。

    * 每次轉多少°？ 角度 = 進度 * M_PI * 2

    * startAngle = -M_PI_2

    * endAngle = -M_PI_2 + 進度 * M_PI * 2

    * 不會及時更新視圖顯示?為什麼，因為drawRect只會在視圖顯示的時候調用一次。

    * 怎麼重繪？

    * 手動調用drawRect方法，不行，因為你自己不能建立上下文，必須系統調用來調用

    * setNeedsDisplay：在view上做一個重繪的標記，在下一次繪圖的周期來臨，就會先建立好上下文，然後自動調用drawRect重繪。

 

 

4> 繪製餅圖

    * PPT分析 -> 找規律 -> 得出startA,endA,angle的結論

    * startA = endA angle = 比例 * 總度數360° endA = startA + angle

    * angle = 自己 / 100.0 * 360

    * 一個一個扇形畫

5> 繪製柱狀圖

    * PPT分析 -> 找規律 -> 得出w,h,y,x的結論

    * w = viewW / (2 * count - 1)

    * h = viewH * 比例

 

6> UIKit封裝繪圖方法演練(不需要上下文)

6.0 繪製文本

6.1 繪製矩形

6.2 繪製映像

6.4 映像裁切 -> 指定裁切地區之後，所有繪圖資訊都只顯示裁切地區內

 

7> 模仿UIImageView/雪花(定時器)

 

8> 圖形上下文棧

 

9>  矩陣變換

 

iOS開發中 Quartz2D使用詳細 簡介