論文第1章：緒論

面向移動設備的矢量繪圖平臺設計與實現

Design and Implementation of Mobile Device-oriented Vector Drawing Platform

引用本論文： 張雲貴. 面向移動設備的矢量繪圖平臺設計與實現[D]. 北京:北京理工大學軟件學院, 2013.

本論文的類似度爲0%，是源創論文。歡迎評閱，請勿抄襲。

若是在研究或論文中使用到，歡迎回復或私信你的學校、姓名、研究領域，並在論文中添加引用或致謝。感謝你對開放成果的尊重和鼓勵。

 

第1章 緒論

1.1 研究背景和意義

傳統的移動設備不適合交互式繪圖應用[1]。2010年iPad發佈後，涌現了各類平板電腦，目前，國內的平板電腦以Android和iOS操做系統爲主。其高分辨率、較高配置、便攜性和性價比使其適合於較複雜的交互式矢量圖形應用。

在iOS和Android上，國內的二維交互式矢量繪圖軟件極少，缺少通用繪圖的開源框架。移動設備的硬件架構、交互方式及開發環境與PC機相差很大，開發難度高。2012年國內數字化教育發展迅速，移動終端的應用成爲重點[2]。面向移動設備的矢量繪圖技術在移動學習和互動教學應用（例如手寫批註、圖文筆記、幾何教學、漢字書寫）中具備較大的發展空間和應用價值。

根據以上現狀的分析，肯定選題爲研究面向移動設備（iOS和Android操做系統）的交互式二維矢量繪圖平臺。由於不一樣應用領域的需求差別大、多數開發人員可以勝任軟件界面定製和業務功能擴展的開發，因此將研究範圍限定在二次開發平臺（通用開發包）及底層實現上。以跨平臺開源框架的形式避免在不一樣平臺上重複開發、擴大適用範圍。該平臺將應用於互動課堂教學、閱讀批註和圖文筆記等多種軟件中。

1.2 國內外研究現狀

1.2.1 移動圖形引擎的研究現狀

在移動設備上的二維圖形引擎主要分爲下面三大研究方向。

（1）基於渲染流水線的OpenGL ES[3]和OpenVG[4][5]。前者適合於三維瀏覽和遊戲應用，跨平臺性和硬件加速是其主要優勢，國內研究不少，有較多開源框架。但使用其進行二維繪圖開發會加大系統複雜性、增長開發成本。而OpenVG適合於SVG和Flash等二維圖形的高質量渲染場合，目前應用在GIS和導航等少數領域。

（2）基於畫布模型的二維圖形庫[6][7]。相對於渲染流水線方式其開發難度較低、與操做系統的內置界面庫融合程度高。iOS和Android的核心圖形庫分別是Quartz 2D和Skia（其Java封裝框架爲Android Canvas）。Quartz 2D內部可使用OpenGL ES進行圖形渲染和層合併。Android從3.0起可使用OpenGL ES對多數繪圖API進行硬件加速。所以基於畫布模型的圖形庫在移動設備上也具備較高的性能。

（3）基於HTML5 Canvas或移動SVG的實現方式[8]。經過JavaScript腳本實現交互繪圖，其跨平臺性、豐富渲染特性和開發難度較低是其主要優勢。因爲運行開銷較大和網頁瀏覽器兼容問題等緣由，目前在移動設備上應用還很少。

1.2.2 矢量繪圖相關的開源項目

表1‑1 移動平臺上的二維繪圖開源框架

開源項目	編程語言	特色
PocketSVG	ObjC	從SVG文件生成CAShapeLayers或路徑對象
SVGKit	ObjC	顯示和交互操做SVG圖形，使用CoreAnimation顯示
iPhoneTextReader	ObjC、C	使用Quartz 2D顯示多種格式的電子書
Core-Plot	ObjC	使用Quartz 2D和Core Animation 顯示圖表，可顯示動態變化的圖形和光滑曲線
ECGraph	ObjC	使用Quartz 2D顯示靜態圖表
SmoothLineView	OjbC	使用Quartz 2D快速繪製光滑曲線
Vectoroid	Java	基於ImageView交互式繪製圖形，可讀寫SVG文件
AndroidPlot	Java	基於View或Widget顯示靜態和動態圖表
svg-android	Java	基於PictureDrawable 顯示SVG文件的圖形
TPSVG	Java	基於Drawable 顯示SVG文件的圖形
AChartEngine	Java	顯示多種圖表，有擴展框架ChartDroid
DroidGraph	Java	顯示圖表，餅圖和線圖
DroidCharts AFreeChart	Java	顯示多種圖表，JFreecharts的Android移植版，在應用程序中將Canvas傳給該框架實現繪圖
jjoe64/GraphView	Java	顯示條狀圖和線圖，可滾動和放縮顯示

在iOS和Android上，國外的二維交互式矢量繪圖軟件較多[9]，國內極少。開源軟件或框架較少，表1‑1列出主要的二維矢量繪圖開源框架（OpenGL ES一般用在遊戲引擎和複雜的圖形平臺中，本文不做研究），這些框架大多在2011-2012年發佈。

iOS繪圖框架一般基於Quartz 2D圖形庫開發，基於CoreAnimation動畫引擎實現高性能的動態繪圖，基於圖像視圖或CAShapeLayers顯示大量圖形。Android繪圖框架則主要基於普通視圖交互繪製。基於圖像視圖或可繪製對象的渲染方式用於圖形較多的場合。這些開源繪圖框架使用C/C++實現的不多，難以同時適用於iOS和Android。

1.2.3 iOS繪圖優化技術

楊碩飛在2011年使用Quartz 2D取得了較好的繪圖效果[10]。除此以外國內對該圖形庫的學術研究較少，在互聯網上的官方資料和翻譯文章較多，應用較普遍。

雙緩衝顯示技術在PC上很常見，但照搬到iOS上容易出現問題：在iPad 3等顯示屏設備上繪圖很慢（建立位圖沒有考慮屏幕放大比例時會更慢）。其主要緣由[11]是在緩衝位圖上繪圖沒法使用GPU的加速特性，複製圖像和插補運算很耗時。

離屏渲染技術是移動設備上經常使用的加速繪圖技術，其原理是先渲染圖形或圖像到CALayer（內部有矩形紋理）中，在界面顯示時由GPU合成到屏幕幀緩存中。圖形繪製階段是在CPU上進行的，圖形複雜時難以快速顯示。爲了更快顯示覆雜內容，可採用漸進式渲染技術[12]。在用戶交互變慢或CPU空閒時在後臺線程中進行填充等更豐富的渲染操做。對於拖動平移或捏合放縮動做，即時顯示全部圖形影響體驗，可只改變CALayer的變換矩陣[13]，由CoreAnimation快速顯示。

離屏渲染技術又稱爲預渲染技術，Kurt總結了兩種實現方法[14]：

（1）將繪製好的位圖放到UIImageView中，讓該視圖以矩形紋理方式交給GPU合成顯示，避免了在CPU上進行位圖複製操做（位圖的顯示涉及內存複製操做）。

（2）將離屏緩衝位圖做爲視圖的層（CALayer）的內容，但不能實現drawRect函數、不能調用setNeedsDisplay函數，並確保視圖的內容模式不爲重繪模式。

對於第一種方法，可使用透明視圖進行觸摸響應和動態圖形顯示，在其下層採用圖像視圖，在觸摸結束後在後臺線程中合併圖形到圖像視圖。因爲避免了位圖複製操做，該方法能達到60FPS的流暢程度[15]。

在使用離屏渲染技術可能遇到這兩個問題[16]。（1）因爲Quartz 2D使用CPU進行繪製，若是繪製時間太長就會出現wait_fences錯誤。（2）Quartz 2D在屏幕顯示時直接在矩形紋理上繪製，這可避免大內存複製，若是超出GPU的緩衝大小（超過屏幕大小或層太多），就會在普通內存塊上繪圖，而後提交到GPU，這會致使性能問題。解決方法：（1）減小繪製內容。例如，不顯示不可見的圖形、在動態放縮時僅顯示圖形外邊框。（2）將複雜內容分紅多個視圖或子層渲染，沒必要所有從新渲染。

將CALayer標記爲光柵化層可以減小複雜圖形的渲染頻度，但若是視圖常常改變內容就會下降性能，須要禁用自動光柵化，不使用額外的緩衝位圖。

對於大圖片，避免經過剪裁顯示和使用drawRect顯示，可以使用多個CATiledLayer分區拼接顯示。其餘優化方法有：（1）將多條線段合併到一個路徑中批量繪製；（2）動畫顯示時不使用反走樣、不顯示文本內容；由於Quartz 2D須要使用單獨緩衝渲染這兩種內容，（3）使用整數像素座標能避免自動反走樣。

1.2.4 Android繪圖技術

Android繪圖的主要實現方式是基於SurfaceView的多線程繪製方式、在本地動態庫中使用Skia的實現方式，而基於普通View的繪製方式性能相對較低，基於圖像視圖或可繪製對象的渲染方式用於圖形較多的靜態圖形的繪製中。

高幀率繪圖主要使用OpenGL ES或SurfaceView實現，後者容易使用。Chris介紹了後者的經典實現方式[17]：在主線程處理觸摸交互事件，在內容線程計算和管理圖形，由SurfaceHolder控制的渲染線程只進行每幀的繪製。Chris建議避免內存申請和釋放，以免垃圾回收的暫停影響。Chris經過性能對比指出Canvas對於圖形不是太多、更新頻度不高的場合，其性能也不差。

從Android 3.0起在屏幕繪圖時可以使用OpenGL ES 2.0硬件加速繪圖，Android 4.0默認全面硬件加速。基於位圖的Canvas仍然使用軟件渲染方式。Ryan指出該硬件加速特性的缺點是個別顯示效果會改變、多佔用進程的2~8MB內存，簡單使用硬件加速繪製全部圖形會致使在部分機型上性能變差[18]。視圖的層使用硬件加速時，會佔用較多內存，官方推薦僅在動畫顯示時使用硬件加速。

Robert建議對程序背景圖使用RGB_565編碼（一般是ARGB_8888），減小透明視圖的層次，減小浮點運算量[19]。這樣能大幅減小CPU的渲染時間。Android官方針對性能和JNI設計提出了不少建議。例如，使用靜態方法而不是虛方法。

1.2.5 圖形引擎跨平臺的方式

在使用基於畫布模型的圖形庫方面，不少軟件都基於某一種圖形庫（例如Quartz 2D、GDI+）實現，若是要移植到不一樣的操做系統上就會很困難。對此侯炯總結了WebKit基於圖形庫適配器的跨平臺策略[20]：定義統一的畫布接口，在外部插件中使用某種圖形庫實現該接口。這樣確保內核模塊跨平臺、對應用提供相同的接口。

圖形中間件[21]是更進一步的跨平臺方式。除了屏蔽圖形庫差別性外，還可根據應用對性能和內存資源的需求選擇基於預緩存的渲染驅動方式和基於圖形庫適配的渲染驅動方式。還有一種方式是採用跨平臺的渲染算法實現圖形引擎[22]。

爲了彌補某些圖形庫缺乏特定類型曲線的問題，一般將曲線轉換爲三次貝塞爾曲線[23]。例如使用三次貝塞爾曲線表示任意角度的圓弧、四段Bezier曲線表示橢圓、將B樣條曲線和三次參數樣條曲線分解爲連續的三次貝塞爾曲線。Mike總結了基於三次貝塞爾曲線[24]的計算技術。例如曲線轉換、包絡框、點中測試、圖形相交、分割和拼接、外擴、裁剪。

1.2.6 多點觸摸和手勢識別

Luke總結了十種經典的核心手勢，單指手勢有單擊、雙擊、拖動、快滑、長按，雙指手勢有縮放、旋轉、長按並單擊、長按並拖動[25]。最後兩種手勢在主流操做系統中沒有內置支持[26]，單指手勢都支持，在Android上須要自行識別旋轉和縮放手勢。研究代表食指、中指或五個手指在交互中使用得最多[27]。較多Android機型最多同時識別三個觸點信號[28]。因此在繪圖平臺中應儘量只使用單指和雙指手勢。

將觸摸事件識別爲手勢的一個常見問題是手勢二義性（手指動做可理解爲多種類似的手勢類型）。通常經過延遲發送技術解決[29]。基於觸點的觸摸狀態、位移和時間的方法可解決幾種手勢的衝突[30]：（1）快滑和拖動經過滑行的距離判斷；（2）單擊、長按和雙擊手勢經過兩次點擊的時間間隔和按下持續時間判斷。在iOS上除了採用延遲開始和延時結束的方法外，還容許應用程序使用這幾種方法：設置手勢靜態依賴關係、動態判斷新觸點可否加入到某個手勢、容許對多個手勢進行同時識別判斷。

1.2.7 編程語言和開發方式

C++適合大多數移動平臺。如何在多種平臺上實現統一的繪圖接口是將要面臨的一個難題。iOS程序能夠在一個文件中同時使用ObjC和C++，經過C++類重載的方式實現擴展和集成。在Android平臺上主要使用Java及Android SDK開發應用程序，使用C/C++及Android NDK開發JNI接口的本地動態庫[31]。

Android本地動態庫的開發存在較多困難，主要有JNI編寫、NDK編譯和調試、內存泄漏和溢出問題。SWIG能夠將C++鏈接到JNI接口。Charles在2010年發現使用SWIG生成的Java類不適合Android的Dalvik虛擬機[32]，改用javah工具從Java類生成JNI導出函數，只能生成C語言的函數定義文件。目前，這些程序的Java代碼不多調用C++的類接口，通常是將C++代碼封裝到C函數中。Android代碼從C++類繼承和擴展則幾乎沒有。Android官方也建議少用虛函數、慎用JNI本地接口。所以須要研究Java與C++銜接的有效方式，下降開發難度。

本文研究發現SWIG官方在2012年4月修復了該問題，Onur Cinar在同年12月出版的專著中介紹了SWIG與NDK結合的實現方法[33]。所以可使用SWIG新版本開發Android本地動態庫。

1.2.8 Android內存訪問

在針對Android設計繪圖接口時應儘量使用簡單數據類型，少用包裝對象，以免JNI接口的性能損失。因爲Dalvik最多支持512個JNI本地引用對象，容易出現內存溢出的問題，在JNI內部實現上要注意釋放JNI引用對象[34]。

Android的每一個進程默認最多使用16MB內存，容易出現內存溢出問題[35]。一般的解決方法是使用軟引用緩存位圖對象[36]。但Android 2.3之後軟引用對象會被強行回收（弱引用對象回收更快），並且從3.0起位圖數據改放到本地庫內部，沒法預知其釋放時機，容易引發內存溢出問題。可以使用LruCache或DiskCache進行緩存。其餘方法有：（1）在顯示小圖片時下降採樣率以便減小內存佔用量。（2）對Activity（應用程序組件）內的線程和異步消息響應者（Handler）特殊處理以便防止Activity不能釋放。（3）對於背景圖（BackgroundDrawable），在Activity的銷燬函數中對Activity解除引用。

1.3 本文的研究內容

移動設備的顯示特性、交互方式及開發環境與PC機相差很大，如何在受限的硬件條件下開發高性能的繪圖平臺存在較多技術難題。爲了不在iOS和Android上重複開發、下降移植工做量，須要設計適合多種移動設備的跨平臺繪圖架構。

所以，本文對下列工做內容進行重點研究和闡述：

（1）設計跨平臺的交互式繪圖系統架構，適應iOS和Android等多種移動設備的顯示特性和多點觸摸的交互方式。同時減小重複開發、下降移植工做量。

具體設計方案是抽象出畫布接口和視圖接口，讓跨平臺內核與設備平臺相關的圖形庫和界面庫分離。設計跨平臺的手勢分發接口，在設備平臺相關的界面適配器中識別手勢，並映射到內核的手勢分發接口，由內核進行命令轉發或放縮計算。

（2）研究iOS上的矢量圖形和圖像的顯示特性和優化方法，實現基於Quartz 2D圖形庫的高性能的通用交互式繪圖平臺。涉及多種離屏渲染技術的應用和優化。

（3）基於SWIG和NDK實現Android封裝模塊（Java）與跨平臺內核（C++）的調用和回調擴展，研究並實現基於Android Canvas的矢量圖形和圖像的高性能顯示方法，實現通用交互式繪圖平臺。

本繪圖平臺（TouchVG）的矢量圖形和繪圖功能與傳統的CAD等繪圖軟件相似，在本文中不重點描述。

1.4 論文組織結構

本文共分爲下列七章：

第一章，緒論。說明研究的意義、背景、現狀，描述了研究的主要內容。

第二章，相關技術介紹。歸納本文涉及的核心技術和基礎理論。

第三章，移動繪圖平臺的架構設計。總結移動設備的特色，設計適合移動設備的擴展機制、平臺架構、繪圖內核模塊及設備接口。

第四章，iOS繪圖平臺的實現。試驗iOS上基於Quartz 2D的多種顯示技術，總結出性能較高的設計方案。

第五章，Android繪圖平臺的實現。使用SWIG實現C++內核與Android代碼的互操做，實驗和總結Android繪圖技術，給出實現效果。

第六章，繪圖平臺的應用和評估。從應用方式和效果、平臺對比等多個方面對繪圖平臺進行了評估和總結。

總結和展望。總結本文的主要工做、創新點和不足，及後續研究工做。

---

[1] 何高奇. 面向移動設備的圖形繪製技術研究[D]. 杭州:浙江大學計算機學院, 2007.

[2] http://www.dajianet.com/digital/2012/0419/185839.shtml

[3] 官酩傑. 基於OpenGL ES的移動平臺圖形渲染研究與實現[D]. 北京:北京交通大學, 2010.

[4] 沈江. 基於OpenVG的圖形繪製關鍵技術研究[D]. 杭州:杭州電子科技大學, 2010.

[5] 何須仕, 萬健, 徐小良. 基於OpenVG矢量圖渲染加速研究[J]. 計算機應用與軟件, 2010, 27(1):111-113.

[6] 周方曉等. 用GDI+和麪向對象設計方法構建交互式圖形平臺[J]. 微電子學與計算機, 2010, 27(10):165-169.

[7] 魯力, 李欣. 基於AGG算法庫的通用圖形接口設計[J]. 微計算機信息, 2009, 25(2):266-267.

[8] 李慧雲, 何震葦, 李麗等. HTML5技術與應用模式研究[J]. 電信科學, 2012, 28(5):24-29.

[9] http://www.singaporebim.com/Articles_Oversea/147.html

[10] 楊碩飛. 動態幾何畫板的研究及其在iPhone平臺的實現[D]. 成都:電子科技大學, 2011.

[11] http://stackoverflow.com/questions/10410106/drawing-image-with-coregraphics-on-retina-ipad-is-slow/10424635

[12] http://www.sencha.com/blog/understanding-hardware-acceleration-on-mobile-browsers

[13] http://stackoverflow.com/questions/13277031/core-graphics-performance-on-ios

[14] http://www.jwz.org/blog/2012/07/back-buffering-performance-on-ios-with-quartz

[15] http://stackoverflow.com/questions/11261450/drawrect-with-cgbitmapcontext-is-too-slow

[16] http://stackoverflow.com/questions/11100984/cgcontextdrawlayeratpoint-is-slow-on-ipad-3

[17] http://www.linuxgraphics.cn/android/write_real_time_for_android.html

[18] http://www.extremetech.com/computing/107995-the-truth-about-hardware-acceleration-on-android

[19] http://www.rbgrn.net/content/290-light-racer-20-days-32-33-getting-great-game-performance

[20] http://www.doc88.com/p-78940304236.html

[21] 張江水, 華一新, 唐衡麗等. 嵌入式GIS跨平臺技術的研究與實現[J]. 測繪科學技術學報, 2012, 29(3):214-217.

[22] 劉楠, 李欣. 跨平臺高質量二維圖形庫設計與實現[J]. 計算機工程與設計, 2010, 31(7):1599-1622.

[23] Fain G. Curves and surfaces for CAGD: A practical guide, 5th Edition. 2002.

[24] http://processingjs.nihongoresources.com/bezierinfo

[25] http://www.lukew.com/touch

[26] 本研究發現：iOS的長按手勢容許有拖動狀態，在拖動時至關於「按住並拖動」手勢。官方並未宣傳此用法。

[27] Epps J. A study of hand shape use in tabletop gesture interaction[A]. Proceedings of CHI EA '06 [C].

[28] http://3g.163.com/coop/ucweb/mobile/11/0312/00/6UTG4KEE00112K95_0.html

[29] 孟祥亮. 顯示錶面上多觸點手勢研究[D]. 北京:清華大學計算機科學與技術系, 2010.

[30] 季紅豔. 基於多點觸摸技術的人機交互研究[D]. 上海:華東師範大學軟件學院, 2011.

[31] http://www.aton.com/developing-an-android-mobile-application

[32] http://www.aton.com/android-native-libraries-for-java-applications

[33] Onur Cinar. Pro Android C++ with the NDK. Berkeley: Apress, 2012

[34] http://www.ibm.com/developerworks/cn/java/j-lo-jnileak/index.html

[35] http://blog.gorges.us/2010/07/developing-apps-within-androids-16mb-memory-limit

[36] http://blog.csdn.net/jindegegesun/article/details/8447434