基于矢量的同步手繪系統

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

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

關鍵詞：同步手繪 矢量 形狀識別 Android

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

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

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

1 同步手繪系統

1.1 系統總體結構

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

1.2 移動端設計與實現

1.2.1 手勢解析模塊

手勢解析模塊主要監聽繪圖控件上的觸摸事件，將其解析成 onDrawStart onDrawMove，onDrawEnd，onCameraChangeStart，onCameraChange onCameraChangeEnd回調上層處理函數。手勢解析模塊通過解析MotionEvent的屬性更新狀態來通過構建狀態機來更新觸摸點狀態。

1.2.2 控件管理模塊

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

1.2.3 命令管理模塊

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

1.2.4 形狀修正模塊

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

1.2.5 渲染模塊

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

1.2.6 同步模塊

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

1.3 PC端設計與實現

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

1.3.1 圖形繪制模塊

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

1.3.2 同步模塊

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

2 存儲格式設計

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

如表1所示，開始的4*7=28個byte為camera的7個float類型的參數，接下來的4*4=16個byte解釋全局畫筆的4個float參數，然后的4個byte解釋為總路徑的數量。一次解析這些路徑。其中第一個byte為路徑的類型，接下的4*9個byte為路徑的偏移矩陣，然后的4*4個byte為路徑包圍框，緊接著的4*4個byte為這個路徑的畫筆參數，隨后的4個byte為int，表示這條路徑點的數量，最后的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））。接下來維護一個棧，以保存當前的凸包，對于每一個在排序后的隊列中的點，如果正在考慮的點與棧頂的兩個點不是“向左轉”的，就表明當前棧頂的點并不在凸包上，這時需要將其彈出棧，重復這一個過程直到正在考慮的點與棧頂的兩個點是“向左轉”的。（如果發現三點共線的情況，算法可以考慮忽略它或者報告這一情況，在某些情況下算法要找到在凸包上所有的點）需要通過算法簡單地計算兩個向量的有向面積，即兩個向量叉乘的結果來判斷兩個向量的相對位置，如果其結果為0，這三個點是共線的，如果其結果為正，這三個點是向左轉的，否則，它是向右轉的。

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

4 結語

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

參考文獻

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

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

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

[4] 姚昱旻，劉衛國.Android的架構與應用開發研究[J].計算機系統應用，2008（11）：99-111.

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

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

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