Design And Implementation Of Topologydrawing Engine Based On HTML5

There are so many the Topology Drawing softwares on the market,such as Visio,EDrawSoft.These Topology Drawing softwares can easily draw all kinds of professional business Flow Chart,Project Management Chart,Network Topology Chart,etc.But these softwares are based on C/S structure of the software,it's hard to upgrade and expand.Web-based software mainly have three kinds of technology: Flash,HTML5 Canvas,Silverlight.Flash and Silverlight need to install the plugin,it has been gradually eliminated by the market.The Web client is through SVG technology to complete the drawing before the HTML5,but this technique can't meet the needs of complex graphics drawing.HTML5 is a new generation of HTML standards,provides a canvas tag and a series of JavaScript script API to achieve the drawing function.The Flow Chart of the component are rare which compared to the chart component based on the HTML5 technology of the data visual components in the software market.The use of canvas technology in HTML5,expressed JSON format Topology Drawing,developed a set of standard topological drawing engine,you can generate a set of topology chart through the configuration of JSON data.Developers do not need to write complex drawing chart programming.It can not only improve the code reuse rate,thus greatly improve the speed of software development,but also has a certain practical value.In this paper,based on the research of the functional requirements of the Web topological graph drawing,the HTML5 Canvas technology Which can design is proposed.The main work of this paper is as follows:(1)Based on the analysis of the requirements of the Topological Drawing engine,this paper studies HTML5 Canvas programming technology and JavaScript object-oriented technology to develop the system architecture.(2)This paper analyzes the object system of the topological graph,and designs thebusiness objects of the topological graph to gives the class diagram.The data structure of the drawing program is designed,and the JSON data of the drawing program is defined.(3)According to the characteristics of the drawing program,the single object model,the factory pattern,the command mode,the state mode and the observer model are used to reduce the complexity of the program.(4)In this study,we completed the design of the data interface with the server,the data format used JSON format,through the AJAX technology to access the Web server,it conforms to the SOA architecture.(5)The development and implementation of based on map HTML5 drawing engine system is accomplished through the careful coding process.And we have used the drawing engine for the actual project of a company.(6)The system has been tested and the results show that the system is reliable and scalable.We have a seamless connection with the company's business data.In short,the design is expected to achieve.