天天看點

iOS開發-Quartz2D初識

Quartz2D如果單獨的從Quartz,那麼會發現Quartz是一個開源的Java作業排程架構,單獨從英文翻譯的角度來看的話Quartz的英文是石英,如果有的時候不小心搜尋會發現手表推薦。本文中介紹的Quartz是位于MAC OS X的Drawin核心之上的繪圖層,有時候也認為是CoreGraphics。Quartz直接地支援Aqua,借由顯示2D繪圖圖形來建立使用者接口,包含實時繪制(rendering)和次像素(sub-pixel)精準的反鋸齒,由Quartz Compositor和Quartz 2D元件組成。

Quartz Compositor是指合成視窗系統,管理和合成幕後視窗視訊來建立Mac OS X使用者接口,Quartz 2D以PDF的規範為基礎的圖形庫,用來繪制二維文字和圖形。

Quartz 2D是在MAC OS X中的主要繪圖函式庫。它取代早期版本的MAC OS(現在稱為"Classic")所使用的QuickDraw。Quartz 2D是以Adobe PDF(一種統一的檔案格式,不管在那個平台上建立,在任何來源的檔案中保留所有的字型,格式,顔色,以及繪圖)1.4版本為基礎。他是源自NeXT的Display PostScript後代。Quartz 2D與QuickDraw在數個關鍵領域有所不同。

QuickDraw天生地以raster圖形為基礎,基本的繪圖元素是像素。Quartz 2D替代地使用更數學的方法,座标空間是二維實數所定義的抽象觀念。在這個空間的點可以被連線起來形成路徑,像是直線,貝茲曲線等等。要在顯示器上建立實際上的影像,那些路徑就會被點陣化在顯示器裝置分辨率下用來産生像素。這樣允許相同的繪圖指令可以在任何裝置上,使用可以得到的最佳分辨率,來産生相同的輸出。就像在PostScript,路徑可以被劃線成為外框,直線以此類推,且封閉的路徑可以被填滿而創造出實體的形狀。文字是簡單地由路徑産生,然後形成文字标記的形狀。

在iOS上,所有的繪制,無論是否采用OpenGL、Quartz、UIKit、或者 Core Animation—都發生在UIView對象的區域内。視圖定義繪制發生的螢幕區域。可以自己寫一個內建UIView的類,然後自己繪制需要的圖形(如三角形),繪制文字,繪制圖檔,讀取PDF,截圖(UIImagePicker截取圖檔)等常用功能。

一般有點開發經驗的應該都會聽說過上下文,搞過ASP.NET MVC的都知道,微軟提供的EF上下文簡直就是開發者福利,其他語言也有,大概就是兩個對象互相操作的一個橋梁,EF是資料層和控制器層互動必備,iOS中如果想繪制圖檔,也離不開上下文,具體先來看一段代碼,需要建立一個View繼承子UIView,預設的就會有一個drawRect方法

調用自定義的View中的drawRect:方法之前,視圖對象會自動配置其繪制環境,使代碼可以立即進行繪制。作為這些配置的一部分,UIView對象會為目前繪制環境建立一個圖形上下文(對應于CGContextRef封裝類型)。該圖形上下文包含繪制系統執行後續繪制指令所需要的資訊,定義了各種基本的繪制屬性,比如繪制使用的顔色、裁剪區域、線的寬度及風格資訊、字型資訊、合成選項、以及幾個其它資訊。 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<code>- (</code><code>void</code><code>)drawRect:(CGRect)rect {</code>

<code>    </code> 

<code>    </code><code>CGContextRef context = ();</code>

<code>    </code><code>//設定起始點</code>

<code>    </code><code>CGContextMoveToPoint (context, 160, 100);</code>

<code>    </code><code>CGContextAddLineToPoint (context, 100, 180);</code>

<code>    </code><code>CGContextAddLineToPoint (context, 160, 180);</code>

<code>    </code><code>// 設定邊界</code>

<code>    </code><code>[[UIColor blackColor] setStroke];</code>

<code>    </code><code>//填充顔色</code>

<code>    </code><code>[[UIColor redColor] setFill];</code>

<code>    </code><code>//繪制路徑</code>

<code>    </code><code>CGContextDrawPath(context, kCGPathFillStroke);</code>

<code>}</code>

 Quartz2D是一個C語言架構,其API是純C語⾔的,Quartz2D的API來自于Core Graphics架構,代碼中執行個體化了一個UIGraphicsGetCurrentContext上下文,繪制圖形,通過上下文設定圖形的輸出路徑,最終效果就是一個直角三角形:

iOS開發-Quartz2D初識

代碼的調用很簡單,如果方法不是很熟悉可以查找一下,大概原理還是比較簡單,如果不是很清晰,可以接下來看一張蘋果官網的圖:

iOS開發-Quartz2D初識

有五種可用的上下文執行個體供我們選擇使用,Printer,PDF,Bitmap,Layer,Window使用,Window,Printer用于OS X~開發中一般用到是Btimap,Layer較多,關于PDF的需要根據業務來看,接下來再看一段代碼就是一個圓形: 

16

<code>  </code><code>//擷取上下文</code>

<code>    </code><code>CGContextRef context = UIGraphicsGetCurrentContext();</code>

<code>    </code><code>CGRect rect = CGRectMake(50, 200, 200, 200);</code>

<code>    </code><code>//是否有邊框</code>

<code>//    UIRectFrame(rect);</code>

<code>    </code><code>//矩形中添加一個橢圓</code>

<code>    </code><code>CGContextAddEllipseInRect(context, rect);</code>

<code>    </code><code>[[UIColor greenColor] setStroke];</code>

<code>    </code><code>//設定綠色背景</code>

<code>    </code><code>[[UIColor greenColor] setFill];</code>

<code>    </code><code>// 3. 繪制路徑</code>

 最終效果如下:

iOS開發-Quartz2D初識

最常見的應該是設定一條直線:

<code>    </code><code>CGContextSetLineCap(context, kCGLineCapRound);</code>

<code>    </code><code>CGContextSetLineWidth(context, 1);  </code><code>//線寬</code>

<code>    </code><code>CGContextSetAllowsAntialiasing(context, </code><code>true</code><code>);</code>

<code>    </code><code>CGContextSetRGBStrokeColor(context,0, 0,0,0.8);  </code><code>//線的顔色</code>

<code>    </code><code>CGContextBeginPath(context);</code>

<code>    </code><code>CGContextMoveToPoint(context,100,outerFrame.size.height/3);  </code><code>//起點坐标</code>

<code>    </code><code>CGContextAddLineToPoint(context, 100,outerFrame.size.height*2/3);   </code><code>//終點坐标</code>

<code>    </code><code>CGContextStrokePath(context);</code>

重寫一般都是都放在drawRect中執行,如果沒有加載出來對應的,我們應該通過setNeedsDisplay調用drawRect方法~

本文轉自Fly_Elephant部落格園部落格,原文連結:http://www.cnblogs.com/xiaofeixiang/p/4278214.html,如需轉載請自行聯系原作者

繼續閱讀