基于矢量的同步手繪系統(tǒng)

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

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

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

中圖分類號：TP277 文獻標識碼：A 文章編號：1672-3791（2017）01（b）-0038-02

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

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

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

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

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

1.2 移動端設計與實現(xiàn)

1.2.1 手勢解析模塊

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

1.2.2 控件管理模塊

控件管理模塊集中處理所有控件的交互邏輯，設置每一個控件的事件將其分發(fā)至命令管理模塊或由自己處理。控件響應事件，如果是單純的界面變化，只由控件管理模塊自己處理，當涉及到繪制等具體邏輯時，交由命令管理模塊。

1.2.3 命令管理模塊

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

1.2.4 形狀修正模塊

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

1.2.5 渲染模塊

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

1.2.6 同步模塊

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

1.3 PC端設計與實現(xiàn)

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

1.3.1 圖形繪制模塊

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

1.3.2 同步模塊

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

2 存儲格式設計

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

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

3 Graham scan算法在識別算法中的應用

葛立恒掃描法（Graham scan）算法是一種計算一組的平面點凸包的算法，時間復雜度為{＼displaystyle O（n＼log n）}O（n＼log n）。

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

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

4 結(jié)語

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

參考文獻

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

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

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

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

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

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

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