基于IOS雙緩沖繪圖技術(shù)的研究

何 宇，林曉煥

（西安工程大學 電信學院，陜西 西安 710048）

ios是蘋果公司研發(fā)的手持設(shè)備操作系統(tǒng)，是目前最流行的終端設(shè)備操作系統(tǒng)之一，由于蘋果手持設(shè)備強大的硬件功能，以及靈活的平臺應(yīng)用，所以ios可以靈活的處理復(fù)雜的動畫。隨著手持設(shè)備的普及，越來越多的工作也需要在手持設(shè)備上來完成，自定義繪圖可以更有目標性的在終端設(shè)備上顯示出需要重點顯示或注意的內(nèi)容。目前，基于ios的繪圖（即沒有用雙緩沖技術(shù)，后稱普通繪圖）在重繪時有屏幕閃爍和波形不連續(xù)的現(xiàn)象，而雙緩沖技術(shù)的應(yīng)用可以讓手持設(shè)備的界面更清晰，更光滑，更符合人們的視覺效果。文中主要通過在ios操作系統(tǒng)平臺上研究和實現(xiàn)雙緩沖技術(shù)繪圖來解決普通繪圖的重繪時屏幕閃爍和波形不連續(xù)的問題。

1 雙緩沖繪圖技術(shù)的實現(xiàn)

1.1 雙緩沖繪圖的原理

基于ios的繪圖可以依靠兩個不同的庫來實現(xiàn)繪圖功能，一個是Quartz 2D庫，它是Core Graphics框架的一部分；另一個是OpenGl ES庫，它是跨平臺的庫[1]。本文將從容易著手，使用方便的Quartz 2D繪圖介紹。Quartz 2D是一個2D繪圖引擎，它起源于Mac OS X，但是在iPhone OS中也有充分的應(yīng)用[2]。

要實現(xiàn)繪圖功能，不僅需要添加繪圖所需要的庫文件，而且還要繼承特定的抽象類。UIViewController是畫面控制的中心類，是組成應(yīng)用程序的重要元素。UIView是組成畫面的基本元素，UIView是擁有位置屬性及一定尺寸的四邊形。在ios上繪圖時，需要重載UIView里的方法來實現(xiàn)[3]。

Quartz 2D在繪圖的過程中使用了繪畫者模型。在繪畫者模型中，每個連續(xù)的繪制操作都是將一個繪制層放置于一個畫布上[4]。有了畫布之后，就需要定義繪圖所在的區(qū)域，即繪圖上下文。繪圖上下文包括了所有的繪圖參數(shù)，是一個數(shù)據(jù)類型，用來封裝Quartz繪制圖像的輸出設(shè)備信息[5]。數(shù)據(jù)類型包含了繪圖所需要的線條的粗細，顏色，繪制的路徑方向等。當我們加載抽象類UIView子類的drawRect:方法時，就會得到畫布和繪圖上下文，接下來就需要在drawRect:方法中設(shè)置與繪圖上下文相關(guān)的畫筆顏色和線條的寬度，一切準備就緒后，就可以在繪圖上下文中繪圖，完成繪圖操作后，圖形上下文必須負責將圖形呈現(xiàn)到畫布上[6]。

當動態(tài)（從上到下、從左到右）的繪圖時，蘋果繪圖自帶的重繪功能可以幫助開發(fā)人員減少不必要的開銷。重繪就是通過不斷地調(diào)用drawRect:方法里面定義的一小塊繪圖區(qū)域來實現(xiàn)大面積的繪圖，這樣就減少了系統(tǒng)內(nèi)存的使用，但是為了減少重載時，不必要的內(nèi)存消耗，蘋果并不建議直接調(diào)用drawRect:方法，而是通過調(diào)用UIView子類的set Needs Display方法，系統(tǒng)自動調(diào)用drawRect:方法來避免資源的浪費。所謂“雙緩沖技術(shù)繪圖”是指在內(nèi)存中建立一個“圖形設(shè)備上下文”，而所有的繪圖操作都將在這個“圖形上下文緩存區(qū)”上進行，在需要顯示這個“圖形上下文”的時候，再把它更新到屏幕設(shè)備上。

圖1 應(yīng)用程序的類圖Fig.1 The application diagram

1.2 雙緩沖繪圖的實現(xiàn)

普通繪圖的重繪，是在創(chuàng)建好的圖形上下文中設(shè)置一段路徑，然后通過不斷地重繪該段路徑來完成想要的圖形，普通的重繪在重繪已定義的路徑和更新界面之間有時間間隔，所以出現(xiàn)了波形不連續(xù)和界面閃爍的現(xiàn)象，如圖2所示。

圖2 普通重繪的波形圖Fig.2 Waveform diagram of ordinary redraw

要用雙緩沖技術(shù)實現(xiàn)繪圖功能，首先需要創(chuàng)建圖形上下文 CGContextRef， 蘋果為雙緩沖繪圖提供了 API CGContextRef CGBitmapContextCreate（void*data，size_t width，size_t height，size_t bitsPerComponent，size_t bytesPerRow，CGColorSpaceRef colorspace，CGBitmapInfo bitmapInfo）其 中data是指繪圖操作被渲染的內(nèi)存區(qū)域，width和height分別是被渲染內(nèi)存區(qū)域的寬度和高度，bitsPerComponent指被渲染內(nèi)存區(qū)域上的控件在屏幕每個像素點上需要使用的bits位，colorspace指被渲染內(nèi)存區(qū)域的顏色格式。

由于整個繪圖區(qū)域的大小是在父視圖調(diào)用抽象類UIView的子視圖時設(shè)置的，所以需要在initWithFrame方法里面根據(jù)父視圖傳回的 CGRect的大小設(shè)置繪圖需要渲染的區(qū)域，然后在 drawRect:里調(diào)用 CGColorSpaceCreateDeviceRGB（）設(shè)置渲染區(qū)域的RGB顏色格式。繪圖的渲染區(qū)設(shè)置好后，就需要設(shè)置畫筆的顏色和畫筆的粗細，CGContextSetStroke ColorWithColor方法可以設(shè)置畫筆的顏色，CGContextSetLineWidth可以設(shè)置畫筆的粗細，為了應(yīng)用更符合客戶端的操作，本文在父視圖里設(shè)置了顏色按鈕和粗細按鈕，用戶可以按照自己的想法選擇顏色和畫筆的粗細，接下來就需要創(chuàng)建繪制的路徑，首先需要把畫筆移動到起始點CGContextMoveToPoint，然后移動路徑到另一點CGContext AddLineToPoint，一點到另一點的方式多種多樣，本文主要是通過正弦波路徑到達，即 CGContextMoveToPoint（context，self.progress，260+sin （（3.1415926/45）*self.progress）*50）； self.progress+=0.5； floatt=self.progress； CGPointgoPoint=CGPointMake （t， 260 +sin （（3.1415926/45）*t）*50）；CGContextAddLineToPoint（context， goPoint.x， goPoint.y）；現(xiàn)在可以用前面設(shè)置好的畫筆CGContextStrokePath（）繪制創(chuàng)建的正弦波路徑。到此終于完成了第一次緩沖?，F(xiàn)在把第一次繪制的圖形CGBitmapContextCreateImage緩沖到二次緩沖區(qū)CGImageRef， 為了避免內(nèi)存泄漏， 在這里 可以CGContextRelease（）釋放第一次緩沖區(qū)的圖形上下文，然后把二次緩沖區(qū)的內(nèi)容通過UIImage的類方法轉(zhuǎn)換為UIImage型，最后調(diào)用drawInRect:把最終緩沖好的內(nèi)容顯示在屏幕上，此時就可以看見清晰的波形。如圖3所示，根據(jù)不同的畫筆顏色和畫筆粗細繪制出了光滑的波形，并且在繪制波形的過程中，可以點擊保存按鈕來保存繪制的波形。

圖3 雙緩沖重繪波形圖Fig.3 Waveform diagram of double buffering redraw

2 實驗結(jié)果與分析

普通繪圖的波形如圖2所示，與雙緩沖繪制的波形如圖3所示相比較，發(fā)現(xiàn)普通繪圖的（0，0）點在屏幕的左上角，雙緩沖繪圖的（0，0）點在屏幕的左下角，所以就會出現(xiàn)兩個圖所示的波峰（波谷）相反的情況。在代碼調(diào)試的時候，波形從左到右逐步繪制，但是普通繪圖先在繪圖上下文中繪制波形，然后將繪制的波形呈現(xiàn)在屏幕上，這兩步之間有一定的時間差，所以普通繪圖看上去不僅屏幕閃爍，而且波形也不連續(xù)。雙緩沖技術(shù)巧妙的解決了普通繪圖產(chǎn)生的屏幕閃爍和波形不連續(xù)的現(xiàn)象。雙緩沖技術(shù)繪圖先在創(chuàng)建的內(nèi)存區(qū)域?qū)崿F(xiàn)兩次緩沖繪圖，最后把整個內(nèi)存區(qū)域直接繪制到屏幕上，這樣人們的視覺就不會看到繪圖操作和更新屏幕操作之間由于時間差而引起的屏幕閃爍和波形斷斷續(xù)續(xù)的現(xiàn)象。

3 結(jié) 論

經(jīng)驗證，利用雙緩沖技術(shù)繪圖巧妙的解決了普通繪圖在重繪時引起的屏幕閃爍和波形不連續(xù)的現(xiàn)象，使繪制出的波形畫面更清晰、更符合人們的視覺效果，為基于ios操作系統(tǒng)強大動畫功能的畫面質(zhì)感提供了有力的保障。

[1]Mark D，Nutting J，LaMarche J.iphone 4與ipad開發(fā)基礎(chǔ)教程[M].北京：清華大學出版社，2012.

[2]XMobileApp.iPhone創(chuàng)意開發(fā)入門與實踐[M].北京：人民郵電出版社，2010.

[3]王志剛，王中元，朱蕾，等.iphone UIKit詳解[M].北京：電子工業(yè)出版社，2012.

[4]DevDiv移動開發(fā)社區(qū).ios開發(fā)實戰(zhàn)體驗[M].北京：海洋出版社，2012.

[5]劉威.Objective-C編程之道ios設(shè)計模式解析 [M].北京：人民郵電出版社，2011.

[6]夏偉頻.ios編程[M].武漢：華中科技大學出版社，2013.