跨平台绘图系统的制作方法

本发明属于绘图技术领域，特别涉及一种跨平台绘图系统。

背景技术：

近年来，随着移动设备的普及，其高分辨率、较高配置、便携性和性价比使其适合于较复杂的绘图应用。针对手机和平板电脑(以ios和android为主)绘图的需求高速增长，面赂移动设备的矢量绘图技术具有较大的发展空间和应用价值。可广告泛应用于手机绘图、教育软件平台、图像处理各领域。然而目前主流的移动平台绘图软件存在以下的缺点：

多采用位图的格式，存在数据存储量大，拉伸后会有失真的缺点，而矢量图的格式可以很好的避免这些缺点；

缺少教学环节，一般都是由用户自己来绘制，对于缺少绘画基础的用户，没有一个很好的引导和教学功能。

技术实现要素：

本发明实施例提供一种跨平台绘图系统，该绘图系统用于矢量绘图，包括：

内核视图模块，该模块管理图形，将显示和手势请求转发给交互命令和图形实体；

交互命令模块，将手势请求转换为绘图步骤，实现交互逻辑，对显示请求以动态图形回显交互效果；

图形实体模块，在系统内核中管理和显示图形数据。以及，

视图适配器，该视图适配器使用显示界面框架实现占位视图，响应绘制和触摸消息，将显示请求和识别出的手势委托内核视图处理；

画布适配器，将画布接口的显示原语映射到特定图形库的绘制函数。

本发明根据移动设备的特性，提出了一种跨平台引导式矢量绘图平台的设计方案。在跨平台内核中使用c++实现矢量绘图功能；在设备相关模块中实现视图适配器和画布适配器、触摸手势识别，并将手势信息委托内核处理；绘图过程中加入导师教学功能，用户可以采用类似临摹的方式简化绘画的学习过程。

本发明具有以下有益效果：

(1)跨平台，内核中使用c++实现绘图功能，可以在不同平台(android,ios,win)之间共用；内核易于扩展、设备相关模块易于实现。

(2)采用矢量图的格式，可任意放大和缩小，且数据存储量小。

附图说明

通过参考附图阅读下文的详细描述，本发明示例性实施方式的上述以及其他目的、特征和优点将变得易于理解。在附图中，以示例性而非限制性的方式示出了本发明的若干实施方式，其中：

图1本发明实施例中跨平台绘图模型示意图。

图2本发明实施例中绘图平台的体系结构。

图3本发明实施例中绘图mvc架构。

图4本发明实施例中引导式绘图流程图。

具体实施方式

根据一个或者多个实施例，本发明的绘图系统模型如图1所示。包含六大元素，具体描述如下。

(1)应用程序。集成绘图平台，定制界面布局和效果，应用绘图数据。

(2)视图适配器。使用界面框架实现占位视图，响应绘制和触摸消息，将显示请求和识别出的手势委托内核视图处理。允许内核以回调方式刷新内容。

(3)画布适配器。将画布接口的显示原语映射到特定图形库的绘制函数。

(4)内核视图。管理图形，将显示和手势请求转发给交互命令和图形实体。

(5)交互命令。将手势请求转换为绘图步骤，实现交互逻辑。对显示请求，以动态图形回显交互效果。扩充交互命令可实现更多绘图功能。

(6)图形实体。在内核中管理和显示图形数据，扩充类型实现更多绘图功能。

根据一个或者多个实施例，本发明的绘图系统的结构如图2所示。为了降低模块耦合性、在不同的设备平台上提高可复用性，矢量绘图平台按图2所示的分层架构设计。总体上分为两大层：跨平台绘图内核层和设备平台相关的界面封装层。在跨平台绘图内核层中实现设备平台无关的功能。在界面封装层中提供设备平台特有的通用功能，供顶层的各种应用程序使用。

对于操作系统ios，界面封装层采用objc和c++实现。对于android，界面封装层采用java实现。在绘图内核层与界面封装层之间提供jni封装层，允许android的java代码与内核的c++代码相互调用。实现相互调用的关键技术是使用swig进行编程语言的转换和集成。在windows桌面应用中，可以使用c#和wpf开发界面封装层及程序(也可以使用mfc和gdi+实现。)swig也应用在c++与c#之间的衔接转换上。

在各个操作系统上有相应的绘图平台，这些平台有相同的内核。如ios和android绘图平台。这些绘图平台都是本地应用形式，能实现更大程度的融合和性能优化。在绘图内核中实现主要的绘图功能，通过在不同平台上编译同一代码的方式适应多种平台、避免重复开发、提高可复用性。

为ios提供的绘图平台以静态库的形式供各种绘图应用程序使用。应用程序无需使用绘图内核的接口，只需使用界面封装层所提供的简易接口，从而降低了应用开发的工作量。界面封装层和应用程序都基于ios平台的sdk开发，可以实现统一的界面风格，降低实现难度。

为android应用程序提供的绘图平台包含一个jar包(内核jni和界面封装层的java类)和一个绘图内核的本地动态库。应用程序通过使用界面封装层所提供的简易接口降低了集成难度。界面封装层和应用程序都基于android平台的sdk开发，可以最大程度地利用平台sdk的特性，实现紧密融合。

根据一个或者多个实施例，本发明的绘图平台采用如图3所示的mvc架构模式设计动态行为。

(1)在绘图视图中响应重绘消息，使用当前的绘图上下文初始化画布适配器，将此画布适配器以抽象画布接口对象传入内核视图，请求绘图。

(2)内核视图将静态绘图和动态绘图的请求分别转发给图形实体和当前绘图命令。图形实体和绘图命令调用画布接口对象绘图。在绘图时画布适配器将被回调。

(3)在绘图视图中响应触摸消息，识别出手势后委托内核视图处理，由内核视图转发给当前绘图命令进行交互式绘图。

(4)绘图命令根据触摸位置改变临时图形，调用抽象视图接口的重绘函数触发重绘消息，在下次重绘时显示该临时图形，从而实现动态绘图。在一次触摸结束后改变图形实体，调用视图接口的重新生成函数，这样就会显示新的图形实体内容。

根据一个或者多个实施例，本发明的绘图平台有下列六个核心模块，除了graphview模块外都是跨平台的模块。

(1)graphview：设备平台相关的适配器模块，包含视图适配器和画布适配器。

(2)coreview：内核视图模块，为上层适配器提供访问接口，管理图形数据，将显示和手势请求转发给图形实体或交互命令。

(3)command：交互命令模块，实现选择命令及多个绘图命令。这些命令用于绘制和修改各种图形，为上层界面提供动作消息接口以便接受触摸手势或鼠标消息数据。交互命令模块在内部将动作消息分发给相应的命令对象，实现交互式绘图。

(4)shape：图形实体模块，主要功能是常见图形的存储、渲染和交互计算。

(5)graphics：图形接口模块，实现显示坐标系变换、放缩平移计算、多种曲线形状的显示输出。在图形接口库中不应用任何图形库，只是提供了适合多种平台的画布接口。由界面封装层的画布适配器类使用某一种图形库来实现该画布接口。

(6)geometry：数学几何模块，实现点、矢量、变换矩阵、矩形框、基于bezier的曲线、路径、剪裁、最短距离等几何计算功能及方程组求解等数学算法。

绘图平台参考html5canvas标准设计了跨平台的画布接口，定义了表1中所列出显示原语，适合多数图形库。

(1)基于路径的矢量图形显示。

画布接口支持子路径，包含beginpath、moveto、lineto、bezierto、quadto、closepath及drawpath等7种显示原语。设计要点：a、避免使用数组、点等复合数据类型，没有折线和多边形等需要可变数量坐标的绘图函数，主要使用浮点数和整数等简单类型，以免在jni中生成复杂的参数类型。b、坐标使用单精度浮点数而不是整数，与iphone，ipad等高像素密度(ppi)的显示屏相适应。

因为矩形、线段、圆、椭圆是较简单且经常使用的图形，大多数图形库都提供了这些图形的绘制函数，所以在画布接口中提供了drawrect、drawline、drawellipse绘图函数。其他矢量图形可以用这些路径显示原语表示。例如使用三次贝塞尔曲线表示任意角度的圆弧、四段贝塞尔曲线表示椭圆、将b样条曲线和三次参数样条曲线分解为连续的三次贝塞尔曲线。

表1画布回调接口gicanvas

(2)设置画笔和画刷。

包含setpen和setbrush设置函数。设计要点：a、颜色值使用整数(intargb)，在android上可直接应用该颜色值，在ios等平台上按字节顺序提取各个颜色分量并转换为平台特有的颜色类型。b、在跨平台内核的gigraphics类中保存线宽等绘图参数，自动判断和调用画布接口的setpen和setbrush函数，避免在各个设备平台的画布适配器中重复实现该功能。

(3)图形剪裁。

使用图形库的剪裁功能，包含saveclip、restoreclip、cliprect、clippath函数。

(4)显示图像。

为了简化实现、隔离平台的差异性，图像在设备平台中管理，在画布接口中只使用名称来标识图像对象。drawhandle(x,y,type)显示原始大小的控制点图标等点状图像，drawbitmap(name,xc,yc,w,h,angle)在一个矩形框内显示图像。对于drawbitmap，使用实际宽高表达图像放缩信息、角度表达图像旋转信息、图像的中心位置表达位移信息，这三者共同表达图像的矩阵变换信息，以任意角度和大小矢量化显示图像。

关于绘图命令的设计，绘图平台在上述静态图形显示的基础上，根据多点触摸动作的位置信息，动态改变和显示图形。如表2所示，其执行步骤如下：(1)在绘图视图类中识别出多点触摸手势动作，委托内核分发手势动作。在绘图视图类(例如mydeviceview)中利用系统内置的手势识别器从多点触摸信息中识别出某种触摸手势，然后转换手势动作参数并委托内核处理。

(2)内核视图(gicoreview)将手势动作分发给当前的绘图命令，由绘图命令根据触摸位置来改变临时图形的形状。

(3)绘图命令改变临时图形后，调用视图接口的redraw。

函数，视图适配器自动设置重绘区域和触发重绘消息。

(4)视图类在重绘响应函数中委托内核显示动态图形，内核的绘图命令将调用抽象画布接口(gicanvas)绘制动态图形(例如拖曳效果)。

根据ios和android的手势识别特点(例如android需要自行实现放缩和旋转手势的识别算法)，设计了如表2所示的绘图命令的手势原语。其中，click、doubleclick、longpress是单指手势，touchbegan、touchmoved、touchended是单指拖动手势(使用最多，故分解为三个)，twofingersmove对应于双指捏合、旋转和拖动手势(三种手势合并为一个手势原语是为了避免在设备平台识别具体手势类型)。

表2绘图手势原语

mgmotion包含当前触点、起始触点、触摸动作状态和视图giview对象等数据，通过mgmotion的view成员变量将设备平台的视图适配器对象传递到内核。在跨平台内核中使用命令模式和模板方法模式设计交互命令体系结构。每个交互式绘图命令都对应于一个命令类，支持表2所示的手势原语接口。每个命令类对应有一个唯一标识的命令名称，所有命令对象都在mgcmdmanager命令管理器类中缓存。内核中提供常用的基本绘图命令，外界模块可以实现更多的交互命令类，将命令名称和类工厂函数登记到命令管理器，在实际使用该命令时才创建命令对象。

根据一个或者多个实施例，本发明中，引导式绘图首先由厂商或高级用户录制好绘画的步骤，作为教程供普通用户使用。普通用户打开教程后，教程会逐步播放，在这个过程中，用户可以进行类似临摹的操作，在这样的过程中掌握绘画的方法。其内容主要包括三个模块：

教程录制模块：记录每一步绘图操作，保存成教程文件。

教程播放模块：读取教程文件，用户点击下一步操作时，开始播放对应步骤的内容。

用户绘制模块：教程的每一步内容绘制完成之后，可以让用户进行临摹绘制的操作。相应的流程如图4所示。

本发明的引导式绘图的实现方式是：教程文件记录绘画的每一步，没有绘画基础的用户也可以按照教程文件中的步骤一步一步的绘制出效果很好的作品。

值得说明的是，虽然前述内容已经参考若干具体实施方式描述了本发明创造的精神和原理，但是应该理解，本发明并不限于所公开的具体实施方式，对各方面的划分也不意味着这些方面中的特征不能组合，这种划分仅是为了表述的方便。本发明旨在涵盖所附权利要求的精神和范围内所包括的各种修改和等同布置。