一种用于绘制航线图的系统及方法与流程

本发明涉及图像处理领域，尤其涉及一种用于航线图绘制的系统及方法。

背景技术：

航线图表示不同城市、机场、航空公司之间的关系，其中航线图的应用很多，例如可以通过该关系体现航空运价。其中，航空运价指的是由国家航空管理部门制定的，使用民用飞机或者其它航空器运送旅客和货物的价格体系。

对于航线图的绘制，现有技术中一般采用c/s(client/server架构,即客户端/服务器架构)模式绘制航线图，即通过下载客户端绘制航线图。然而，若后台对客户端进行了升级后，用户若要采用升级后的功能，需要重新下载客户端，即后台的功能升级和用户的使用不能同步，那么非常影响用户体验。

技术实现要素：

有鉴于此，本发明实施例提供了一种航线图的绘制系统和方法，实现了通过b/s(brower/server,浏览器/服务器)模式绘制航线图。在b/s模式下，服务器更新后，浏览器端也可以得到同步的更新，这样解决了现有技术中c/s模式导致的服务升级和用户体验无法及时同步的问题。

本发明实施例公开了一种航线图的绘制系统，该系统包括：

底层模块、中间层模块和顶层模块；

所述底层模块将canvas作为图形容器；

所述中间层模块部署了至少一个绘图功能模块；所述绘图功能模块是通过对图形绘制功能进行封装后得到的；

所述顶层模块包括多个预先封装了数据处理算法的数据管理模块；所述数据处理算法是依据航线图的特征设置的。

可选的，所述功能模块包括：

基于canvas对基本的图形绘制功能进行封装后得到的场景模块；

对不同节点的绘制方法进行封装后得到的节点模块；

对不同线条的绘制方法进行封装后得到的线条模块。

可选的，所述功能模块还包括：

动态展示模块，是对图片动态展示功能进行封装后得到的；所述图片动态展示功能是通过固定频率刷新的方式实现的。

可选的，所述数据处理算法模块包括：

区域计算模块、对接数据结构模块、机场及航司节点模块、航线数据处理模块、展示插件模块；

所述区域计算模块是对节点和线条位置的计算方法进行封装后得到的；

所述对接数据结构模块是对图形结构和文本结构的转换算法进行封装后得到的；

所述机场及航司节点模块是基于航线图的特征对航线图的每个节点的属性进行封装后得到的；

所述航线数据处理模块，对绘制的图形结构中的数据的管理方法进行封装后得到的；所述图形结构中的数据包括：节点和线条，所述线条表示不同节点之间的关系；

展示插件模块，是基于航线图的特征对航线图的绘制流程进行封装后得到的。

可选的，所述数据处理算法包括：图的数据结构和算法。

可选的，采用javascript进行封装。

本发明实施例还公开了一种航线图的绘制方法，所述绘制方法应用于上述的航线图绘制系统，所述方法包括：

响应于系统触发指令，创建canvas画布；

响应于图形绘制指令，基于绘制的对象调用数据管理模块中的数据处理算法，确定对象的属性、对象的位置和对象的绘制流程；

基于对象的属性、对象的位置、对象的绘制流程和绘图功能模块提供的绘图功能在画布上绘制所述对象。

可选的，所述对象包括：节点和线条。

可选的，还包括：

调用所述数据管理模块中的对接数据处理模块，将绘制的图形结构装换为文本结构。

本发明实施例还公开了一种航线图的绘制装置，包括：

创建单元，用于响应于系统触发指令，创建canvas画布；

确定单元，用于响应于图形绘制指令，基于绘制的对象调用数据管理模块中的数据处理算法，确定对象的属性、对象的位置和对象的绘制流程；

绘制单元，用于基于对象的属性、对象的位置、对象的绘制流程和绘图功能模块提供的绘图功能在画布上绘制所述对象。

本实施例中公开了一种航线图的绘制系统和方法，该系统包括：将canvas作为图形容器的底层模块、部署了至少一个功能模块的中间层模块和包括多个预先封装了数据处理算法的数据管理模块，并且数据管理模块是依据航线图的特征设置的。由此，本实施例实现了通过b/s模式绘制航线图，在b/s模式下，服务器更新后，浏览器端也可以得到同步的更新，这样解决了现有技术中c/s模式导致的服务升级和用户体验无法及时同步的问题。并且，本实施例中，还采用了html5中canvas作为技术支持，减少了网页浏览器对插件的要求，用户无需下载额外的插件，就可以应用本实施例提供的航线图的绘制系统。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。

图1示出了本发明实施例提供的一种航线图的绘制系统的结构示意图；

图2示出了本发明实施例提供的一种航线图的绘制系统的又一结构示意图；

图3示出了本发明实施例提供的一种自动布局的实现流程；

图4示出了本发明实施例提供的添加节点的流程示意图；

图5示出了本发明实施例提供的删除节点的流程示意图；

图6示出了本发明实施例提供的航线图的绘制系统启动后的示意图；

图7示出了本发明实施例提供的一种航线图的绘制方法的流程示意图；

图8示出了本发明实施例提供的一种航线图的绘制装置的结构示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

参考图1-图2，示出了本发明实施例提供的一种用于绘制航线图的系统的结构示意图，在本实施例中，该系统包括：

底层模块100、中间层模块200和顶层模块300；

底层模块100将canvas作为图形容器；

中间层模块200部署了至少一个绘图功能模块；该绘图功能模块是通过对图形绘制功能进行封装后得到的；

顶层模块300包括多个预先封装了数据处理算法的数据管理模块；所述数据处理算法是依据航线图特征设置的。

其中，针对底层模块：

canvas画布是html5中新增的一个重要元素，是专门用来绘制图像。其中，在网页放置一个canvas元素，就相当于在网页上放置一块“画布”，可以在其中进行图像的描绘。

html5是html(hypertextmarkuplanguage，超文本标记语言)最新的修订版本，2014年10月由w3c(万维网联盟)完成标准制定。广义论及html5时，实际指的是包括html、css(层叠样式表)和javascript在内的一套技术组合，目的是能够减少网页浏览器对于需要插件的富互联网应用。

因此，本发明实施例基于canvas的作为技术支持，设计的航线图的绘制系统，实现了可以基于任何浏览器进行航线图的绘制，无需下载特定的浏览器进行航线图绘制。

针对于中间层模块200：

中间层模块200可以表示为一个画图基础功能框架，该框架中包含至少一个功能模块，每个功能模块封装有可以实现不同功能的绘画方法。

在本实施例中，不对绘画功能进行限定，在中间层模块可以部署任何一种可以通过canvas实现的绘画功能。

其中，在本实施例中，部署的绘画模块例如可以包括：

场景模块201、节点模块202、线条模块203；

其中，所述场景模块201是基于canvas对基本的图形绘制功能进行封装后得到的；

所述节点模块202是对不同节点的绘制方法进行封装后得到的；

线条模块203是对不同线条的绘制方法进行封装后得到的。

本实施例中，场景模块201包括图形绘制用到的一些基本功能，例如可以包括：渲染刷新、渲染定位等。

本实施例中，节点模块202中封装有节点的绘制方法，本实施例中的节点表示图形结构中的节点，以航线图的绘制为例，节点表示机场、航空公司或者城市等。

举例说明：对于绘制一个节点来说，可以能包括多个步骤，例如节点的形状，在该形状下每个边如何绘制，例如，若节点的形状为矩形，那么节点模块中封装有矩形的绘制方法。

本实施例中，线条模块203中封装有线条的绘制方法，其中线条用于表示节点之间的关系，以航线图为例，机场和城市之间若有航班的话，那么机场和城市就存在一定的关系，就可以在航线图中就可以通过线条体现出机场和城市之间的联系。其中，线条可以包括：直线或者曲线等，在本实施例中不进行限定，可以是用户设置的任何一种线条形式。

举例说明：假设线条为带箭头的直线，那么绘制的封装方法包括：绘制该带箭头的线条的过程。

除此之外，为了丰富画图的功能，还添加了对图的动态展示功能，具体的，所述中间层模块还包括：

动态展示模块，该模块是对图片动态展示功能进行封装后得到的；该图片动态展示功能是通过固定频率刷新的方式实现的。

针对顶层模块300：

其中，需要说明的是顶层模块300中封装的算法可以是任何一种可以实现航线图绘制的方法，在本实施例中不进行限定，例如可以采用图的数据结构和算法实现对航线图的绘制。

其中，数据处理算法模块包括：

区域计算模块301、对接数据结构模块302、机场及航司节点模块303、航线数据处理模块304和展示插件模块305。

其中，区域计算模块是对节点和线条位置的计算方法进行封装后得到的；

对接数据结构模型302是对图形结构和文本结构的转换算法那进行封装后得到的；

机场及航司节点模块303是基于航线图的特征对航线图的每个节点的属性进行封装后得到的；

航线图数据处理模块304,是对绘制的图形结构中的数据的管理方法进行封装后得到的；所述图形结构中的数据包括：节点和线条，所述线条表示不同节点之间的关系；

展示插件模块305，是基于航线图的特征对航线图的绘制流程进行封装后得到的。

其中，针对区域计算模块301：

在绘制节点和线条时，需要遵循一定的规则，例如不能覆盖已有的节点和线条，将遵循的规则进行编译，并封装在区域计算模块中。

其中，当用户触发节点和线条的绘制指令后，调取区域计算模块中的算法，计算节点和线条的绘制位置。

针对对接数据结构模块302：

在本系统中绘制的图是图形结构，即包含节点和线条的图形，但是在实际应用时，例如当该航线图用于运价系统时，在运价系统中显示时是通过文字展示，故，需要将图形结构的数据转换成文本结构的数据，并对文本结构的数据进行保存，以使调取文本结构的数据可以应用于实际应用中。

针对航司及节点模块303：

航司及节点模块中封装每个节点的属性，其中节点的属性是基于航线图的特征设置的，例如可以包括：节点表示哪个城市、该节点前边或者后边包含哪些节点等。

其中，在绘制航线图时，需要从机场及航司节点模块调取每个节点的属性，并对调度的节点的属性信息进行保存。

针对航线数据处理模块304：

其中，航线数据处理模块304中封装有图形结构中数据的管理方法，可以理解为：对绘制好的图形中包含的所有数据进行管理，例如绘制的图形中包含哪些节点、包含哪些线条，当在已有的图形中添加了节点或者线条后，对保存的图形结构进行更新。

举例说明：航线数据处理模块中封装有自动布局的实现流程，如图3所示，包括：1)清除所有定位信息，2)刷新所有节点数据；3)更新路径信息；4)计算布局，5)对所有的节点进行处理，针对任何一个节点，包括：获取当前节点的上一个已处理的兄弟节点，6)计算节点的x、y坐标，7)设置节点坐标定位数据，8)处理所有后续节点的x坐标；9)处理入边的重叠内容，10)处理出边的重叠内容。

针对展示插件模块305：

该展示插件模块中封装有基于航线图特征设置的航线图绘制流程。其中，该流程可以包括：节点添加流程、删除节点流程等。

举例说明：节点添加流程和删除节点流程如图4和图5所示。

进一步的，本实施例中采用javascript进行封装。

进一步的，本实施例中，该航线图的绘制系统可以设置于某个应用中，例如可以将该航线图绘制系统的相关文件导入到某个应用中，也可以作为插件部署在浏览器中。

进一步的，在绘制了图形后，调用航线数据处理模块中的数据管理方法，对绘制的图形进行管理，例如刷新数据。

举例说明：参考图6,示出了该系统启动后的示意图，基于图5，对该系统提供的功能进行进一步的说明：

其中，当向左添加节点的(pretransport)按钮被触发后，在当前节点的左侧添加节点；

当向右添加航空节点的(nexttransport)按钮被触发后，在当前节点的右侧添加新的航空节点。

当添加分支航空公司节点(alttransport)的按钮被触发后，在当前节点的下方添加分支航空公司节点。

当向左添加城市节点(predest)的按钮被触发后，在当前节点的左侧添加新的城市节点。

当向右添加城市节点(nextdest)的按钮被触发后，在当前节点的右侧添加城市节点。

当添加分支城市节点(altdest)的按钮被触发后，在当前节点的并列位置添加城市节点。

当删除当前节点(removenode)的按钮被触发后，删除当前所选节点；

当上述连线(removeline)的按钮被触发后，删除选中的连线。

当删除所有(deleteall)的按钮被触发后，删除画布上选中的所有内容。

本实施例中公开的航线图的绘制系统，包括：将canvas作为图形容器的底层模块、部署了至少一个功能模块的中间层模块和包括多个预先封装了数据处理算法的数据管理模块，并且数据管理模块是依据航线图的特征设置的。由此，本实施例实现了通过b/s模式绘制航线图。在b/s模式下，服务器更新后，浏览器端也可以得到同步的更新，这样解决了现有技术中c/s模式导致的服务升级和用户体验无法及时同步的问题。并且，本实施例中，还采用了html5中canvas作为技术支持，减少了网页浏览器对插件的要求，用户无需下载额外的插件，就可以应用本实施例提供的航线图的绘制系统。

参考图7，示出了本发明实施例提供的一种航线图的绘制方法的流程示意图，在本实施例中，该方法包括：

s701：响应于系统触发指令，创建canvas画布；

本实施例中，用户在浏览器或者某应用中启动航线图绘制系统，系统启动后，创建canvas画布。

除此之外，在初始化系统的过程中，除了需要创建画布，还可以包括：

1)创建该系统的视图元素；其中，视图因素包括：画布和按钮。

在创建按钮时，还需要创建每个按钮的功能，并将按钮和功能进行绑定，这样当按钮被触发时，调取按钮相对应的功能。

2)设置语言环境；

其中，用户可以选择使用可以识别的语言，例如可以选择中文语言或者选择英文语言等。

3)初始化显示；

将按钮标识按照设置的语言环境进行显示，例如若选择的中文语言，则以中文格式显示按钮标识。

4)若触发航线图的绘制系统的目的是，阅读已绘制的图形，则调用该图形的模式，其中模式包括：阅读模式、修改模式。

5)加载校验数据；

其中，校验数据的目的是为了校验绘制的节点或线条是否正确。

6)加载初始数据；

若用户打开已绘制的数据，则加载该数据。

s702：响应于图形绘制指令，基于绘制的对象调用数据管理模块中的数据处理算法，确定对象的属性、对象的位置和对象的绘制流程；

本实施例中，对象可以包括：节点和线条。

当系统接收到对图形的绘制指令后，具体的是对某个对象的绘制指令，调取数据处理算法模块中的算法，确定对象的位置、属性和对象的绘制流程；具体的，可以依据区域计算模块中的算法计算对象的位置，依据机场及航司节点模块确定对象的属性，并从展示插件模块中调取该对象的绘制流程。

举例说明，对象的绘制流程可以包括：添加节点、添加线条、删除节点、删除线条等。

s703：基于对象的属性、对象的位置、对象的绘制流程和绘图功能模块提供的绘图功能在画布上绘制所述对象。

本实施例中系统的中间层部署了绘图功能模块，绘图功能模块中封装了绘图的基本功能，在画布上绘制图形时，需要依据部署的绘图功能对图形进行绘制。进一步的，在画布上绘制了图形后，调用航线图数据处理模块中的数据的管理方法，对绘制的图形中的数据进行管理。

本实施例中公开的航线图的绘制方法，包括：响应于系统触发指令，创建canvas画布；基于对象的属性、对象的位置、对象的绘制流程和绘图功能模块提供的绘图功能在画布上绘制所述对象；基于对象的属性、对象的位置、对象的绘制流程和绘图功能模块提供的绘图功能在画布上绘制所述对象。其中，该方法应用于上述公开的航线图的绘制系统。由此，本实施例实现了通过b/s模式绘制航线图,在b/s模式下，服务器更新后，浏览器端也可以得到同步的更新，这样解决了现有技术中c/s模式导致的服务升级和用户体验无法及时同步的问题。并且，本实施例中，还采用了html5中canvas作为技术支持，减少了网页浏览器对插件的要求，用户无需下载额外的插件，就可以应用本实施例提供的航线图的绘制系统。

参考图8，示出了本发明实施例提供的一种航线图的绘制装置的结构示意图，在本实施例中，该装置包括：

创建单元801，用于响应于系统触发指令，创建canvas画布；

确定单元802，用于响应于图形绘制指令，基于绘制的对象调用数据管理模块中的数据处理算法，确定对象的属性、对象的位置和对象的绘制流程；

绘制单元803，用于基于对象的属性、对象的位置、对象的绘制流程和绘图功能模块提供的绘图功能在画布上绘制所述对象。

可选的，所述对象包括：节点和线条。

可选的，还包括：

调用单元，用于调用所述数据管理模块中的对接数据处理模块，将绘制的图形结构装换为文本结构。

本实施例中，通过本实施例的装置，实现了通过b/s模式绘制航线图,在b/s模式下，服务器更新后，浏览器端也可以得到同步的更新，这样解决了现有技术中c/s模式导致的服务升级和用户体验无法及时同步的问题。并且，本实施例中，还采用了html5中canvas作为技术支持，减少了网页浏览器对插件的要求，用户无需下载额外的插件，就可以应用本实施例提供的航线图的绘制系统。

需要说明的是，本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。

对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本发明。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下，在其它实施例中实现。因此，本发明将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。