基干JSONWeb拓扑关系图软件策划与实现.docVIP

基于JSON的Web拓扑关系图软件设计与实现 　　摘要：拓扑图和流程图可以直观反映事物之间的关系，开发一套拓扑图组件具有一定的实用价值。目前采用Web技术开发的拓扑图组件非常少，通过HTML5 Canvas技术开发一套可扩展的拓扑图组件，可以大大提高软件开发速度。通过对拓扑图进行抽象，发现拓扑图实际上图元与连接的集合，采用JSON格式对拓扑图进行序列化，可以对工作图进行保存、数据交换和传输 关键词：JSON；Web；HTML5；绘图 中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2016）28-0056-02 1概述 网络拓扑是网络形状，或者是网络在物理上的连通性，通过网络拓扑图可以可视化表示数据以及事物之间的关系。数据可视化的组件主要以图表组件居多，但是拓扑图、流程图组件很少。使用HTML5中Canvas技术，将拓扑结构图用JSON格式表示，开发出一套标准的拓扑图绘图引擎，通过配置JSON数据，就可以产生一组拓扑图，开发人员不需编写繁杂的图形编程，提高代码重用率，从而大大提高软件开发速度 2 关键技术研究 1）JSON JSON全称是JavaScript Object Notation，是一种数据交换格式，与XML相比，JOSN属于轻量级的数据格式。JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串，然后就可以在函数之间轻松地传递这个字符串，或者在异步应用程序中将字符串从 Web 客户机传递给服务器端程序。在JSON语法中数据结构只有两种：对象与数组。对象就是用{}括起来的键值对集合。数组就是用[]括起来的数据集合。通过对象与数组就可以描述复杂的数据结构 2）拓扑结构图 网络的拓扑结构有很多种，主要有星型结构、环型结构、总线结构、分布式结构、树型结构、网状结构、蜂窝状结构等。从软件的角度看，拓扑图实际上是图元与连接的集合。图元是某个事物的抽象表示，可能是一张图片，也可能只是一个几何形状。通过抽象，可以不需要关注某个图元所需要表达的实际意义，而只需要关注图元几何特征。连接在拓扑图中实际上是事物之间的联系，可能有方向，也可能没方向，从几何的角度看，这种连接实际上是一条[有向]线段或者[有向]折线，在有必要的情况下，连接是带权重的，但这里我们同样只需要关心的几何特征 3）HTML5中canvas绘图技术 在HTML5出来之前，Web客户端是通过SVG技术完成绘图的，但是这种技术无法满足复杂绘图的需求。HTML5 提供了 Canvas 标签和一系列的JavaScript脚本API来实现绘图功能。利用程序进行图形绘制，可以进行图像的像素级操作。与在服务器端通过GDI+技术生成图片，再通过浏览器请求图片，或用插件完成绘图的方式相比，Canvas技术属于纯Web编程技术，在呈现和交互时更加灵活，并极大地简化了图形和网页中其他元素的交互过程 3拓扑关系图的JSON表示 为了描述拓扑关系图，关键点需要用JSON格式来描述图元和连接。一张拓扑图实际上包含两个集合，一个是图元集合，一个是连接集合，即G={u..，l.. } 1）图元的JSON描述。描述图元主要包括几何属性和事物属性。其中几何属性有类型，坐标，宽度和高度。因此一个图元的JSON表示可以如下：unit={id：“unit0”，type：“rect”， x：100， y：100，w：100，h：100} 2）连接的JSON描述。连接反应了拓扑图中的事物的关系，有时是有向连接，一个连接必须有两个图元作为连接节点。一个关系的JSON表示可以如下：link={id：“link0”，fromUnit：“unit0”，toUnit：“unit1”，hasDirection：“True”} 3）拓扑图的JSON表示。从上面可以看出，一张拓扑图的JSON描述可以为：G={“name”：“拓扑图名称”，unitArray：[unit..]，linkArray：[link..]} 4系统实现 1）HTML5中canvas绘图实现方法。通过canvas对象可以获取到一个绘图上下文context，所有的绘图API均通过context调用相关函数完成。下面的代码完成一个坐标为20px，20px，宽度和高度为150px和200px的矩形图元的绘制： var c=document.getElementById（”myCanvas”）； var ctx=c.getContext（”2d”）； ctx.rect（20，20，150，100）； 下面的代码完成一条线段的绘制 ctx.beginPath（）； ctx.moveTo（0，0）； c