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

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

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

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

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

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

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

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

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

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

1.2.1 手勢(shì)解析模塊

手勢(shì)解析模塊主要監(jiān)聽(tīng)繪圖控件上的觸摸事件，將其解析成 onDrawStart onDrawMove，onDrawEnd，onCameraChangeStart，onCameraChange onCameraChangeEnd回調(diào)上層處理函數(shù)。手勢(shì)解析模塊通過(guò)解析MotionEvent的屬性更新?tīng)顟B(tài)來(lái)通過(guò)構(gòu)建狀態(tài)機(jī)來(lái)更新觸摸點(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ā)請(qǐng)求。使用handler在線程之間傳遞信息類(lèi)。looper的主要功能是為特定單一線程運(yùn)行一個(gè)消息環(huán)。一個(gè)線程對(duì)應(yīng)一個(gè)looper。同樣一個(gè)looper對(duì)應(yīng)一個(gè)線程。looper與線程關(guān)聯(lián)的時(shí)候，looper會(huì)同時(shí)生產(chǎn)一個(gè)messageQueue。looper會(huì)不停地從messageQuee中取出消息，即message。然后線程就會(huì)根據(jù)message中的內(nèi)容進(jìn)行相應(yīng)操作。通過(guò)handler把message傳遞給特定的looper，繼而傳遞給特定的線程。創(chuàng)建handler并與相應(yīng)looper綁定之后，傳遞message調(diào)用handler的sendMessage函數(shù)，將message作為參數(shù)傳遞給相應(yīng)線程。之后這個(gè)message就會(huì)被塞進(jìn)looper的messageQueue。然后再被looper取出來(lái)交給線程處理。線程從looper收到message之后原來(lái)線程所需要做出響應(yīng)，在自定義的handler類(lèi)中的handleMessage重構(gòu)方法中編寫(xiě)。

1.2.4 形狀修正模塊

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

1.2.5 渲染模塊

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

1.2.6 同步模塊

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

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

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

1.3.1 圖形繪制模塊

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

1.3.2 同步模塊

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

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

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

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

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

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

4 結(jié)語(yǔ)

該系統(tǒng)實(shí)現(xiàn)了移動(dòng)端繪制矢量圖形并與PC端同步顯示。解決移動(dòng)端到PC的通信問(wèn)題，在保證可靠性的前提下盡可能提高有效性。提供智能識(shí)別功能，對(duì)繪制的線條進(jìn)行智能識(shí)別，并自動(dòng)生成規(guī)范化的圖形（例如：可以識(shí)別矩形、三角形、橢圓等）。用移動(dòng)設(shè)備替代數(shù)位板，為游戲，美工相關(guān)崗位節(jié)約大量的開(kāi)發(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] 荊雷，馬文君，常丹華.基于動(dòng)態(tài)時(shí)間規(guī)整的手勢(shì)加速度信號(hào)識(shí)別[J].傳感技術(shù)學(xué)報(bào)，2012，25（1）：72-76.

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

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

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

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