蔣理+吳聰+孫武軍+尤旋+++李維勇

摘 要：隨著智能手機(jī)的普及，人們對手機(jī)的功能需求日益提高。同步手繪系統(tǒng)可以在手機(jī)上繪制圖形，PC同步顯示手機(jī)上的內(nèi)容。在手機(jī)上增加數(shù)位板與投影筆的功能，豐富手機(jī)的使用方式，方便用戶使用的同時(shí)，節(jié)約成本。該文介紹了基于矢量的同步手繪系統(tǒng)實(shí)現(xiàn)過程。詳細(xì)介紹了Android系統(tǒng)的移動端與PC端的設(shè)計(jì)，介紹了保存矢量圖形的自定義存儲格式，分析了Graham scan算法在形狀識別中的應(yīng)用。

關(guān)鍵詞：同步手繪 矢量 形狀識別 Android

中圖分類號：TP277 文獻(xiàn)標(biāo)識碼：A 文章編號：1672-3791（2017）01（b）-0038-02

用戶在使用PC電腦進(jìn)行手繪創(chuàng)作時(shí)，普通的鼠標(biāo)、鍵盤等輸入設(shè)備往往不能滿足手繪需要的靈活以及精細(xì)控制的需求，而移動設(shè)備（手機(jī)或平板）的輸入方式是直接用手指或觸摸筆在觸摸屏幕上手繪，正好可以滿足手繪的需要，但是移動設(shè)備的顯示屏幕往往太小，為了解決手繪體驗(yàn)的問題，將二者結(jié)合起來，PC端作為顯示終端，移動端作為輸入設(shè)備，用手指或觸摸筆在移動端直接手繪時(shí)，PC端可以實(shí)時(shí)顯示出繪制后的結(jié)果。這樣就能不用購買其他數(shù)位板的情況下得到極佳的手繪體驗(yàn)。

使用同步手繪板可以在利用計(jì)算機(jī)做圖形開發(fā)時(shí)利用移動設(shè)備代替專業(yè)的數(shù)位板，并提供智能輔助。該系統(tǒng)可以滿足計(jì)算機(jī)圖形圖像輔助設(shè)計(jì)的需求。

1 同步手繪系統(tǒng)

1.1 系統(tǒng)總體結(jié)構(gòu)

該系統(tǒng)分為移動端與PC端兩個(gè)部分，移動端主要由以下六個(gè)模塊構(gòu)成：手勢解析模塊、控件管理模塊、命令管理模塊、形狀修正模塊、渲染模塊、同步模塊。PC端主要用于顯示繪制的圖形，由圖形繪制模塊和同步模塊兩部分構(gòu)成。

1.2 移動端設(shè)計(jì)與實(shí)現(xiàn)

1.2.1 手勢解析模塊

手勢解析模塊主要監(jiān)聽繪圖控件上的觸摸事件，將其解析成 onDrawStart onDrawMove，onDrawEnd，onCameraChangeStart，onCameraChange onCameraChangeEnd回調(diào)上層處理函數(shù)。手勢解析模塊通過解析MotionEvent的屬性更新狀態(tài)來通過構(gòu)建狀態(tài)機(jī)來更新觸摸點(diǎn)狀態(tài)。

1.2.2 控件管理模塊

控件管理模塊集中處理所有控件的交互邏輯，設(shè)置每一個(gè)控件的事件將其分發(fā)至命令管理模塊或由自己處理?？丶憫?yīng)事件，如果是單純的界面變化，只由控件管理模塊自己處理，當(dāng)涉及到繪制等具體邏輯時(shí)，交由命令管理模塊。

1.2.3 命令管理模塊

命令管理模塊負(fù)責(zé)所有的模塊與模塊之間的交互，負(fù)責(zé)則調(diào)用和轉(zhuǎn)發(fā)請求。使用handler在線程之間傳遞信息類。looper的主要功能是為特定單一線程運(yùn)行一個(gè)消息環(huán)。一個(gè)線程對應(yīng)一個(gè)looper。同樣一個(gè)looper對應(yīng)一個(gè)線程。looper與線程關(guān)聯(lián)的時(shí)候，looper會同時(shí)生產(chǎn)一個(gè)messageQueue。looper會不停地從messageQuee中取出消息，即message。然后線程就會根據(jù)message中的內(nèi)容進(jìn)行相應(yīng)操作。通過handler把message傳遞給特定的looper，繼而傳遞給特定的線程。創(chuàng)建handler并與相應(yīng)looper綁定之后，傳遞message調(diào)用handler的sendMessage函數(shù)，將message作為參數(shù)傳遞給相應(yīng)線程。之后這個(gè)message就會被塞進(jìn)looper的messageQueue。然后再被looper取出來交給線程處理。線程從looper收到message之后原來線程所需要做出響應(yīng)，在自定義的handler類中的handleMessage重構(gòu)方法中編寫。

1.2.4 形狀修正模塊

形狀修正模塊負(fù)責(zé)在開啟形狀修正模塊后修正形狀。通過提取出幾何形狀的特征，例如：形狀的最小外接矩形的面積、長度、寬度、形狀的凸包的面積、周長、凸包的最大內(nèi)接四邊形的面積、凸包的最大內(nèi)接三角形的面積、周長。通過他們之間固定的比例（例如：圓形的凸包的周長的平方與凸包面積的比值在4π左右）來識別形狀。算法在第三章中詳細(xì)介紹。

1.2.5 渲染模塊

渲染模塊將應(yīng)該顯示的內(nèi)容渲染到手機(jī)屏幕上。從Camera中獲取到當(dāng)前的視野框在PathCollection中找到在視野框中出現(xiàn)的線條最后將其渲染渲染出來。Camera的視野指的是通過手機(jī)觀察到的畫板，當(dāng)視野變大時(shí)，因?yàn)槭謾C(jī)屏幕大小不變所以就有縮小的感覺，移動放大同理。

1.2.6 同步模塊

同步模塊負(fù)責(zé)從網(wǎng)絡(luò)中解析分發(fā)電腦端的移動指令和將手機(jī)端的繪制移動指令發(fā)給PC端。自定義了19個(gè)指令，每個(gè)指令對應(yīng)一個(gè)包裝類。與PC端的通信采用socket方式。

1.3 PC端設(shè)計(jì)與實(shí)現(xiàn)

PC端使用C#.net開發(fā)，主要模塊為：圖形繪制模塊和同步模塊。

1.3.1 圖形繪制模塊

圖形繪制模塊采用了WPF的InkCanvas元素，InkCanvas元素主要的目的是用于接收手寫筆的輸入，用指令模擬繪畫的各種操作，在PC端畫出和手機(jī)端相同的筆跡。InkCanvas元素會引發(fā)各種事件，繪制完一個(gè)筆畫時(shí)會引發(fā)StrokeCollection事件，將筆跡插入到StrokeCollection集合中，通過遍歷StrokeCollection實(shí)現(xiàn)時(shí)光機(jī)的回放效果。通過注冊inkcanvas.Strokes.StrokesChanged這個(gè)路由事件實(shí)現(xiàn)筆跡的Undo、Redo操作。Thumb是可以由用戶拖動的控件，利用Thumb控件作為移動端的輸入?yún)^(qū)域，通過指令結(jié)合DragDelta事件可以對Thumb進(jìn)行位移縮放，根據(jù)Thumb的位置、寬高等信息結(jié)合轉(zhuǎn)換比例，將手機(jī)端的點(diǎn)映射到電腦端相對應(yīng)的位置。

1.3.2 同步模塊

同步模塊通過將IP地址寫入二維碼中供手機(jī)端掃碼建立通信。二維碼的生成使用了zxing.net，zxing.net是.net平臺下編解條形碼和二維碼的工具，將字符編碼時(shí)可以指定字符格式。

2 存儲格式設(shè)計(jì)

為了能夠存取矢量圖，設(shè)計(jì)自定義了*.svd結(jié)尾的文件格式。

如表1所示，開始的4*7=28個(gè)byte為camera的7個(gè)float類型的參數(shù)，接下來的4*4=16個(gè)byte解釋全局畫筆的4個(gè)float參數(shù)，然后的4個(gè)byte解釋為總路徑的數(shù)量。一次解析這些路徑。其中第一個(gè)byte為路徑的類型，接下的4*9個(gè)byte為路徑的偏移矩陣，然后的4*4個(gè)byte為路徑包圍框，緊接著的4*4個(gè)byte為這個(gè)路徑的畫筆參數(shù)，隨后的4個(gè)byte為int，表示這條路徑點(diǎn)的數(shù)量，最后的4*4個(gè)byte為兩個(gè)float值，代表一個(gè)點(diǎn)。

3 Graham scan算法在識別算法中的應(yīng)用

葛立恒掃描法（Graham scan）算法是一種計(jì)算一組的平面點(diǎn)凸包的算法，時(shí)間復(fù)雜度為{＼displaystyle O（n＼log n）}O（n＼log n）。

Graham scan算法首先找到最下最左邊的點(diǎn)P（時(shí)間復(fù)雜度為 O（n）），然后將所有的點(diǎn)E相對于P進(jìn)行極角排序（時(shí)間復(fù)雜度為 O（n＼log n））。接下來維護(hù)一個(gè)棧，以保存當(dāng)前的凸包，對于每一個(gè)在排序后的隊(duì)列中的點(diǎn)，如果正在考慮的點(diǎn)與棧頂?shù)膬蓚€(gè)點(diǎn)不是“向左轉(zhuǎn)”的，就表明當(dāng)前棧頂?shù)狞c(diǎn)并不在凸包上，這時(shí)需要將其彈出棧，重復(fù)這一個(gè)過程直到正在考慮的點(diǎn)與棧頂?shù)膬蓚€(gè)點(diǎn)是“向左轉(zhuǎn)”的。（如果發(fā)現(xiàn)三點(diǎn)共線的情況，算法可以考慮忽略它或者報(bào)告這一情況，在某些情況下算法要找到在凸包上所有的點(diǎn)）需要通過算法簡單地計(jì)算兩個(gè)向量的有向面積，即兩個(gè)向量叉乘的結(jié)果來判斷兩個(gè)向量的相對位置，如果其結(jié)果為0，這三個(gè)點(diǎn)是共線的，如果其結(jié)果為正，這三個(gè)點(diǎn)是向左轉(zhuǎn)的，否則，它是向右轉(zhuǎn)的。

在圖形識別中使用模糊邏輯匹配形狀，通過計(jì)算形狀點(diǎn)集凸包的最大面積內(nèi)嵌三角形、四邊形、最小面積矩形之間的比值與三角形、矩形、橢圓、圓的固定比值來匹配形狀。

4 結(jié)語

該系統(tǒng)實(shí)現(xiàn)了移動端繪制矢量圖形并與PC端同步顯示。解決移動端到PC的通信問題，在保證可靠性的前提下盡可能提高有效性。提供智能識別功能，對繪制的線條進(jìn)行智能識別，并自動生成規(guī)范化的圖形（例如：可以識別矩形、三角形、橢圓等）。用移動設(shè)備替代數(shù)位板，為游戲，美工相關(guān)崗位節(jié)約大量的開發(fā)成本。

參考文獻(xiàn)

[1] M.J Fonseca，J.A Jorge.Using fuzzy logic to recognize geometric shape interactively[J].Digital Object Identifier，2000（S1）：291-296.

[2] 向守兵，蘇光大，任小龍，等.實(shí)時(shí)手指交互系統(tǒng)的嵌入式實(shí)現(xiàn)[J].光學(xué)精密工程，2011，19（8）：1911-1920.

[3] 荊雷，馬文君，常丹華.基于動態(tài)時(shí)間規(guī)整的手勢加速度信號識別[J].傳感技術(shù)學(xué)報(bào)，2012，25（1）：72-76.

[4] 姚昱旻，劉衛(wèi)國.Android的架構(gòu)與應(yīng)用開發(fā)研究[J].計(jì)算機(jī)系統(tǒng)應(yīng)用，2008（11）：99-111.

[5] 李軍輝，李紫陽.GIS中散亂點(diǎn)集凸包的快速算法及編程[J].北京聯(lián)合大學(xué)學(xué)報(bào)：自然科學(xué)版，2014（23）：32-34.

[6] 何必仕，萬健，徐小良.基于OpenVG矢量圖渲染加速研究[J].計(jì)算機(jī)應(yīng)用與軟件，2010，27（1）：111-113.

[7] 李光軍，鄭軍紅，張光忠.一種凸包的改進(jìn)算法設(shè)計(jì)與實(shí)現(xiàn)[J]. 現(xiàn)代計(jì)算機(jī)：專業(yè)版，2010（6）：92-94.