基于HTML5的拓扑图绘制引擎设计与实现

发布时间：2020-07-05 22:11

【摘要】：市面上绘制网络拓扑图的软件很多,比如Visio,亿图等,通过这些图形绘制软件可以很方便的绘制各种专业的业务流程图、工程管理图、网络拓扑图等。但是上述软件均是基于C/S结构的软件,具有升级难,扩展性差等特点。基于Web的图形绘制软件主要有三种技术:flash,HTML5 Canvas,SilverLight技术。其中flash,SilverLight需要安装插件,已经逐渐被市场淘汰。在HTML5出来之前,Web客户端是通过SVG技术完成绘图的,但是这种技术无法满足复杂绘图的需求。HTML5是新一代HTML标准,提供了Canvas标签和一系列的JavaScript脚本API来实现绘图功能。当前市场上基于HTML5技术的数据可视化的组件主要以图表组件居多,但是拓扑图、流程图组件很少。使用HTML5中Canvas技术,将拓扑结构图用JSON格式表示,开发出一套标准的拓扑图绘图引擎,通过配置JSON数据,就可以产生一组拓扑图,开发人员不需编写繁杂的图形编程,提高代码重用率,从而大大提高软件开发速度,具有一定的实际价值。本文从研究Web拓扑图绘制的功能需求出发,,提出了采用HTML5 Canvas技术进行研发系统,主要做了如下工作:(1)论文在对拓扑图绘制引擎的需求分析基础上,确定采用HTML5 Canvas编程技术和JavaScript面向对象技术进行开发,设计出系统架构。(2)认真分析拓扑关系图的对象体系,设计出拓扑图绘制的业务对象,并给出了类图。设计了绘图程序的数据结构,定义了绘图程序的JSON数据。(3)根据绘图程序的特点,使用了单例模式、工厂模式、命令模式、状态模式、观察者模式等多种面向对象设计模式,降低了程序的复杂性。(4)完成了与服务器端的数据接口设计,数据格式采用了JSON格式,通过该AJAX技术访问Web服务器,符合SOA体系结构。(5)同时经过精心的编码过程,完成了基于HTML5的拓扑图绘制引擎系统的开发与实现,并将该绘图引擎用于某公司的实际项目。(6)对系统进行了相应测试工作,测试的结果表明,系统运行可靠,可扩展性强,与公司的业务数据做到了无缝对接,达到了设计预期。
【学位授予单位】：南昌航空大学
【学位级别】：硕士
【学位授予年份】：2017
【分类号】：TP311.52

【参考文献】

相关期刊论文 前10条

1 芦文峰;王凯;吴亚非;窦长旭;;图形绘制引擎的效率和跨平台研究[J];计算机工程与设计;2016年05期

2 杜一;郭旦怀;陈昕;任磊;戴国忠;;一种模型驱动的可视化生成系统[J];软件学报;2016年05期

3 荣艳冬;冯建平;高云胜;;基于HTML5的可视化实时数据监控系统设计与实现[J];电脑编程技巧与维护;2015年20期

4 康保军;;基于TWaver的电信网络拓扑图实现方案研究[J];软件导刊;2014年10期

5 龚丽;;HTML5中的Canvas绘图研究[J];软件导刊;2014年04期

6 傅军;;基于SVG的Web绘图软件设计与实现[J];电脑编程技巧与维护;2014年04期

7 平淑文;潘珏羽;张学金;杜晓荣;;基于HTML5和JavaScript轻量型动画框架开发[J];计算机技术与发展;2013年12期

8 谷伟;;基于HTML5 Canvas的客户端图表技术研究[J];信息技术;2013年09期

9 Shibo HAO;Xuefang ZHU;Guang ZHU;Gang LI;;A comparative study of information visualization from the perspective of intellectual base: Using WoS and CSSCI[J];Chinese Journal of Library and Information Science;2013年02期

10 武佳佳;王建忠;;基于HTML5实现智能手机跨平台应用开发[J];软件导刊;2013年02期

相关硕士学位论文 前1条

1 吴逊;Web下的可控图形组件设计平台[D];重庆大学;2015年

本文编号：2743198