基于矢量的同步手绘系统

蒋理+吴聪+孙武军+尤旋+++李维勇

摘 要：随着智能手机的普及，人们对手机的功能需求日益提高。同步手绘系统可以在手机上绘制图形，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.