基于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）；

ctx.lineTo（300，150）；

ctx.stroke（）；

如果要绘制图片图元，可以采用下面的方法，其中img是图片资源：

ctx.drawImage（img， x， y， width， height）；

下图显示了在一个流程图中包含图片图元和连接的效果。

2）将拓扑图中JSON对象进行序列化和反序列化。当一张拓扑图绘制完成之后需要将当前的数据保存到客户端，首先将拓扑图进行JSON序列化，然后通过webservice保存到服务器。下一次打开该拓扑图时，通过webservice首先获取JSON数据，然后通过反序列化，再将图形展示在客户端。

图元序列化将图元保存为JSON数据，实现方法如下：

NodeUnit.prototype.serialize = function（）

{return "{＼"NodeUnitName＼"：＼"" + this.drawUnitName + "＼"，＼"Type＼"：＼"" + this.drawUnitType + "＼"，＼"x＼"：" + this.x + "，＼"y＼"：" + this.y + "，＼"width＼"：" + this.width + "，＼"height＼"：" + this.height + "}"；}

当从服务器取得JSON串之后，需要将数据还原成为对象，再将图元绘制在浏览器上，图元反序列化方法如下：

NodeUnit.prototype.deSerialize = function（_josnString） {

var nodeObj=eval（_josnString）；

var node = new NodeUnit （nodeObj.NodeUnitName）；

node.x = nodeObj.x；

node.y = nodeObj.y；

node.width = nodeObj.width；

node.height = nodeObj.height；

return node；

}

5小结

本文主要解决了在Web环境下通过HTML5中Canvas技术，定义拓扑图的JSON数据格式，完成拓扑关系图组件的开发。在对拓扑图进行抽象的基础上，发现拓扑图主要由图元和连接构成，通过对关键技术的研究，定义了拓扑图图元和连接的JSON数据结构，然后再利用Canvas 的上下文绘图API，将图形绘制在Web客户端。通过标准的数据格式，二次开发人员不需要进行繁杂的图形编程，提高代码重用率，软件具备良好的健壮性和可扩展性。

参考文献：

[1] 杨秀生.基于HTML5canvas绘图技术研究[J]，信息技术，2013（6）.

[2] 韩义波，宋莉，宋俊杰.Ajax技术结合XML或JSON的使用比较[J].电脑知识与技术，2009（5）.

[3] 唐彬.利用HTML5实现网页图表的研究[J].微型电脑应用，2012（8）.

[4] 高静，段会川.JSON数据传输效率研究[J].计算机工程与设计，2011（6）.