CN101751383A

CN101751383A - 一种使用svg描述网络拓扑的方法

Info

Publication number: CN101751383A
Application number: CN200910243267A
Authority: CN
Inventors: 楚天舒
Original assignee: Beijing Topsec Technology Co Ltd
Current assignee: Beijing Topsec Technology Co Ltd
Priority date: 2009-12-30
Filing date: 2009-12-30
Publication date: 2010-06-23

Abstract

本发明公开了一种使用SVG描述网络拓扑的方法，所述方法包括：使用SVG里的对象元素来表现网络拓扑图形以及里面的节点，通过JAVASCRIPT来控制所述对象元素，动态的控制拓扑节点的载入和显示；使用SVG的LINE元素在拓扑节点中连线，用于表示拓扑节点间的连接关系，所述连线由JAVASCRIPT控制动态产生，并可通过设置LINE元素的属性值，来控制线的起点终点；将上述步骤的数据信息存储在WEB服务器上。本发明可以快速开发出表现丰富，快速灵活，功能强大的拓扑图，相比于传统的C/S界面开发和HTML开发，该技术实现时表现丰富，开发难度相对要小，开发周期短，成本低，交互性强，实用性强。

Description

一种使用SVG描述网络拓扑的方法

技术领域

本发明涉及计算机领域，特别是涉及一种使用SVG(Scalable VectorGraphics，可放缩的矢量图形)灵活描述网络拓扑的方法。

背景技术

在大多的网络管理软件中，图形化的拓扑结构展现是很重要的。它能最直观和准确的给用户息表达出当前网络的结构和相关数据信息。当要灵活迅速的反映网络中各节点间的联系和各节点的状态信的时候，当想要在拓扑图上灵活进行功能操作的时候，传统的灵活响应的界面表现上不是那么的简单，同样也会面临开发难度大，成本高，周期长的问题。

而现有的使用SVG描述网络拓扑的的软件产品中，C/S(Client/Server，客户机和服务器结构)界面技术表现起来有点复杂，开发难度和成本高，而且表现的可能还不够灵活和丰富。目前B/S的软件也越来越多，可能成为一种趋势。在B/S(Browser/Serve，浏览器和服务器结构)上表现拓扑的话，可以通过HTML(HyperText Mark-up Language，超文本标记语言)界面元素来实现，但是由于HTML元素是基于文本的表达形式，所以在复杂丰富并且要求快速表现形式却又太过单一，仅仅是SVG图形的展示，仅仅是一个拓扑结构的单一层次的平面展示，而不能在一个图上做到多级网络的多层次、灵活展示，并且不能针对不同用户去展示个性化的内容，在人性化的交互性上比较差，而且还不支持保存成其他格式图片。

发明内容

本发明提供一种使用SVG灵活描述网络拓扑的方法，用以解决现有技术中存在的HTML表现能力弱的问题。

为达上述目的，本发明提供一种使用SVG描述网络拓扑的方法，所述方法包括：

使用SVG里的对象元素来表现网络拓扑图形以及里面的节点，通过JAVASCRIPT来控制所述对象元素，动态的控制拓扑节点的载入和显示；

使用SVG的LINE元素在拓扑节点中连线，用于表示拓扑节点间的连接关系，所述连线由JAVASCRIPT控制动态产生，并可通过设置LINE元素的属性值，来控制线的起点终点；

将上述步骤的数据信息存储在WEB服务器上。

进一步，使用SVG的文本对象元素来显示拓扑中的所有的文字描述和动态提示。

进一步，使用JAVASCRIPT中的settimeout函数，定时从所述web服务器上获取最新的状态数据，然后根据所述最新状态数据，由JAVASCRIPT程序来更改SVG对象元素的属性，实现定时刷新功能。

进一步，当SVG元素表现的拓扑节点代表域，并且该拓扑节点还包括网络结构时，则描述该拓扑节点的网络结构包括以下步骤：

通过JAVASCRIPT控制dom节点的removeChild函数清除当前SVG中的所有DOM元素，

从所述WEB服务器上读取该节点的下一级拓扑的SVG数据。

进一步，将每个用户的个性化信息以XML格式保存在WEB服务器上，每个用户一个目录，里面存放着此用户的每个域的XML文件，每个XML文件里保存着一个域的所有节点信息；每当用户修改节点信息时，JAVASCRIPT记录下这些信息，然后传给WEB服务器，由WEB服务器来更新用户的个性化信息。

进一步，在JAVASCRIPT中获取得整个SVG图像的文本元素，将该文本元素通过HTTP协议传到web服务器；

web服务器接收到后，将其转换成JPG格式图片，并将JPG格式图片路径返回给用户的客户端，并利用JAVASCRIPT弹出导出框，实现用户的客户端保存功能。

本发明有益效果如下：

本发明可以很快的开发出表现丰富，快速灵活，功能强大的拓扑图。开发出的拓扑图上可以表现出丰富的节点连线，设备拖拉，实时数据和实时状态的刷新，支持鼠标的各种事件响应，支持丰富的菜单项操作，还可做出特效和动画，可灵活的嵌入B/S和C/S软件界面中，并且交互灵活，可快速切换来展示不同层次网络的结构，并可实时保存用户的个性化位置和文字信息，并可导出实时拓扑图片，非常实用。相比于传统的C/S界面开发和HTML开发，该技术实现时表现丰富，开发难度相对要小，开发周期短，成本低，交互性强，实用性强。

附图说明

图1是本发明实施例一种使用SVG描述网络拓扑的方法的流程图。

具体实施方式

以下结合附图以及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不限定本发明。

本发明的基础是SVG格式图形技术，SVG是W3C(World Wide WebConSor-tium国际互联网标准组织)在2000年8月制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准；它用文本格式的描述性语言来描述图像内容，具有动态性和交互性；它基于XML(Extensible Markup Language，可扩展标记语言)，严格遵从XML语法，完全支持DOM(Document ObjectModel，文档对象模型)，可内嵌JAVASCRIPT脚本语言。

为了更方便形象的来描述网络拓扑，由于SVG格式的一些特性，我们可以采用SVG格式文件来描述网络拓扑。

方法如下：

一、架构

SVG表现界面层；JAVASCRIPT表现界面的业务逻辑层，JAVASCRIPT是根据″ECMAScript″标准制定的网页脚本语言，这个标准由ECMA(EuropeanComputer Manufacturers Association，欧洲电脑厂商协会)组织发展和维护，ECMA-262是正式的JAVASCRIPT标准，这个标准基于JAVASCRIPT(Netscape)和JScript(Microsoft)；web服务器上的后台程序(.net)表现服务器的业务逻辑层和数据层。数据传输通过JAVASCRIPT的AJAX(Asynchronous JAVASCRIPTand XML，异步JAVASCRIPT和XML)来动态读取后台web服务器的数据，传输的数据格式是解析快速、使用灵活的JSON(JavaScript Object Notation，是一种轻量级的数据交换格式)。

二、界面表现

使用SVG里的对象元素来表现拓扑图形以及里面的节点。SVG提供了多种图形对象元素，我们可以用它来画出我们所需要的节点图形，而且它还可以以链入的形式来支持显示其他格式的图片，如JPG，GIF等。我们还可以通过JAVASCRIPT脚本来控制这些XML格式元素，可以动态的控制拓扑节点的载入和显示。

如，circle是SVG中表示圆的元素。<circle cx＝″100″cy＝″50″r＝″40″stroke＝″black″stroke-width＝″2″fill＝″red″/>，这是一段SVG中的代码，他表示一个圆，他的位置坐标是(100，50)，半径是40，颜色是红色。而且这些是XML格式的数据，它支持用JAVASCRIPT来操作它的dom节点。所以我们可以很容易的通过JAVASCRIPT脚本程序来动态添加或删除一个circle节点，并改变它的颜色，半径等。或者使用一个JPG图片表示一个设备。

以下为部分示例代码：

//画单个设备图标

Function DeviceDraw(Ditem，Dtype，DImageUrl，ImageWidth，ImageHeight，DX，DY，isref)

{

if(DrawDomainName＝＝currentDomainName ||isref！＝true)

{

if(Ditem！＝null)

{

try{

if(isref＝＝true)

{

if(！isauto)

{

if(Ditem._X！＝″″)

{

DX＝Ditem._X；

}

if(Ditem._Y！＝″″)

{

DY＝Ditem._Y；

}

if(！isreload)

{

var exist＝SVGDocument.getElementById(Ditem._DevName)；

if(exist)

{

DX＝exist.getAttribute(″x″)；

DY＝exist.getAttribute(″y″)；

SVGRoot.removeChild(exist)；

}

else

{

if(！isauto)

{

if(Ditem._X ！＝″″)

{

DX＝Ditem._X；

}

if(Ditem._y ！＝″″)

{

DY＝Ditem._Y；

}

if(！isreload)

{

var exist＝SVGDocument.getElementById(Ditem._DevName)；

if(exist)

{

SVGRoot.removeChild(exist)；

}

var target＝SVGDocument.createElementNS(″http://www.w3.org/2000/svg″，″g″)；

//target.setAttribute(″id″，Ditem._AliasName)；

target.setAttribute(″id″，Ditem._DevName)；

target.setAttribute(″name″，Ditem._AliasName)；

target.setAttribute(″ip″，Ditem._ManageIP)；

target.setAttribute(″webip″，Ditem._WebIP)；

target.setAttribute(″username″，Ditem._UserName)；

target.setAttribute(″password″，Ditem._Password)；

target.setAttribute(″devname″，Ditem._DevName)；

target.setAttribute(″urldevname″，Ditem._UrlDevName)；

target.setAttribute(″devkeyindex″，Ditem._DevKeyIndex)；

target.setAttribute(″urldevkeyindex″，Ditem._UrlDevKeyIndex)；

target.setAttribute(″x″，DX)；

target.setAttribute(″y″，DY)；

target.setAttribute(″cx″，DX)；

p.webaddheight(DY)；

target.setAttribute(″cy″，DY)；

target.setAttribute(″type″，Dtype)；

target.setAttribute(″fill″，″none″)；

target.setAttribute(″pointer-events″，″all″)；

target.addEventListener(″click″，click，false)；

target.addEventListener(″mouseover″，showDeviceToolitip，false)；

target.addEventListener(″mouseout″，hiddenTooltip，false)；

SVGRoot.appendChild(target)；

var targetImage＝SVGDocument.createElementNS(″http://www.w3.org/2000/svg″，″image″)；

targetImage.setAttribute(″id″，Ditem._AliasName+″image″)；

targetImage.setAttribute(″height″，ImageHeight)；

targetImage.setAttribute(″width″，ImageWidth)；

targetImage.setAttribute(″x″，DX)；

targetImage.setAttribute(″y″，DY)；

targetImage.setAttributeNS(″http://www.w3.org/1999/xlink″，″xlink:href″，DImageUrl)；

target.appendChild(targetImage)；

var text＝document.createElementNS(″http://www.w3.org/2000/svg″，″text″)；

target.appendChild(text)；

var textnode＝document.createTextNode(Ditem._AliasName)；

text.appendChild(textnode)；

text.setAttribute(″style″，″fill:black；font-size:12px；font-weight:bold；″)；

var textid＝Ditem._AliasName+″text″；

text.setAttribute(″id″，textid)；

var textx＝parseFloat(DX)+ImageWidth/2-text.firstChild.length*6/2；

text.setAttribute(″x″，textx)；

var texty＝parseFloat(DY)+parseFloat(ImageHeight)+15；

text.setAttribute(″y″，texty)；

}

finally

{

target＝null；

targetImage＝null；

text＝null；

textnode＝null；

exist＝null；

}

我们可以用SVG的文本对象元素<text>来显示拓扑中的所有的文字描述，动态提示等。如<text x＝″10″y＝″40″style＝″font-size:16pt″fill＝″red″>这是一段文字</text>，会显示成“这是一段文字”，颜色为红色，大小是16像素，坐标位置为(10，40)。

以下是部分示例代码：

function drawtip()

{

target.setAttribute(″id″，″tooltip″)；

var targetrect＝SVGDocument.createElementNS(″http://www.w3.org/2000/svg″，″rect″)；

targetrect.setAttribute(″id″，″tooltipRect″)；

targetrect.setAttribute(″height″，″50″)；

targetrect.setAttribute(″width″，″170″)；

targetrect.setAttribute(″x″，″0″)；

targetrect.setAttribute(″y″，″0″)；

//targetrect.setAttribute(″style″，″visibility:hidden；fill:red；stroke-width:1；stroke:black；opacity:.8；pointer-events:none；″)；

target.appendChild(targetrect)；

//text.setAttribute(″style″，

″fill:white；visibility:hidden；font-weight:normal；font-family:SimSun；font-size:9；text-anchor:start；pointer-events:none；″)；

text.setAttribute(″id″，″tooltipInfo″)；

text.setAttribute(″x″，″2″)；

text.setAttribute(″y″，″8″)；

text.setAttribute(″startOffset″，″0″)；

target.appendChild(text)；

SVGRoot.appendChild(target)；

}

拓扑上的右键菜单可使用SVG的菜单对象元素，SVG插件提供了菜单功能的函数，可以在鼠标右键事件函数中利用此函数创建菜单；也可以和HTML交互，利用JAVASCRIPT屏蔽HTML中的右键系统菜单，然后动态建立一个HTML的层，并弹出，这样就形成了HTML中的菜单效果。点击菜单所触发的JAVASCRIPT事件，可以去执行某个特定的功能函数，比如新建节点，删除节点等。配合JAVASCRIPT的控制，可以响应各种鼠标事件，用来实现某些功能。如在拖拉拓扑节点时，可触发JAVASCRIPT中onmousemove等鼠标响应函数，程序可以读出新位置的坐标值，并把新的坐标值赋值到拓扑节点SVG对象的位置属性上，这样整个元素就会移动到一个新的位置，达到灵活布局的效果。

以下是部分示例代码：

function Grab(evt)

{

hihhenMenu(evt)；

var tooltip＝SVGDocument.getElementById(″tooltip″)；

if(tooltip ！＝null)

{

hiddenTooltip()；

//removeTooltip()；

}

if(evt.button＝＝0)

{

var targetElement＝evt.target.parentNode；

DragTarget＝targetElement；

if(DragTarget.tagName＝＝″g″)

{

var transMatrix＝DragTarget.getCTM()；

GrabPoint.x＝TrueCoords.x-Number(transMatrix.e)；

GrabPoint.y＝TrueCoords.y-Number(transMatrix.f)；

//DragTarget.setAttributeNS(null，′pointer-events′，′none′)；

}

else if(evt.button＝＝2)

{

rclick(evt)；

}

}；

function Drag(evt)

{

//debugger；

GetTrueCoords(evt)；

if(DragTarget)

{

var tooltipid＝DragTarget.getAttribute(″id″)；

if(DragTarget.tagName＝＝″g″&&tooltipid！＝″tooltip″)

{

var newX＝TrueCoords.x-GrabPoint.x；

var newY＝TrueCoords.y-GrabPoint.y；

var initcx＝DragTarget.getAttribute(″cx″)；

var initcy＝DragTarget.getAttribute(″cy″)；

var endx＝parseFloat(initcx)+parseFloat(newX)；

var endy＝parseFloat(initcy)+parseFloat(newY)；

DragTarget.setAttribute(′x′，endx)；

DragTarget.setAttribute(′y′，endy)；

DragTarget.setAttribute(′transform′，′translate(′+newX+′，′+newY+′)′)；

}

}；

function Drop(evt)

{

if(DragTarget)

{

if(DragTarget.nodeType！＝9)

{

DragTarget.setAttribute(′pointer-events′，′all′)；

+newY+′)′)；

DragTarget＝null；

}

if(evt.button＝＝2)

{

rightClick(evt)；

}

}；

使用SVG的LINE元素，我们可以在拓扑节点中连线，用来表达拓扑节点间的连接关系，这些线同样可以由JAVASCRIPT控制，动态产生，可以用JAVASCRIPT中的createElement来动态生成line元素，并可通过设置line元素的属性值来控制线的起点终点。

以下是部分示例代码：

//画连线

:var line＝SVGDocument.createElement(″line″)；

var x，y，width，height，linex，liney，imageF；

imageF＝SVGDocument.getElementById(″isf″)；

x＝parseFloat(imageF.getAttribute(″x″))；

width＝parseFloat(imageF.getAttribute(″width″)/2)；

linex＝x+width；

y＝parseFloat(imageF.getAttribute(″y″))；

height＝parseFloat(imageF.getAttribute(″height″)/2)；

liney＝height+y；

line.setAttribute(″id″，″line1″)；

line.setAttribute(″x1″，linex)；

line.setAttribute(″y1″，liney)；

imageF＝SVGDocument.getElementById(″isftoo″)；

x＝parseFloat(imageF.getAttribute(″x″))；

width＝parseFloat(imageF.getAttribute(″width″)/2)；

linex＝x+width；

y＝parseFloat(imageF.getAttribute(″y″))；

height＝parseFloat(imageF.getAttribute(″height″)/2)；

liney＝height+y；

line.setAttribute(″x2″，linex)；

line.setAttribute(″y2″，liney)；

line.setAttribute(″stroke″，″green″)；

line.setAttribute(″stroke-width″，2)；

SVGRoot.appendChild(line)；

使用内嵌的JAVASCRIPT来实现定时刷新功能，可以通过JAVASCRIPT中的settimeout函数定时去web服务器端请求最新的状态数据，然后根据最新数据由JAVASCRIPT程序来更改SVG对象元素的颜色，大小等属性。这样能动态的更新网络拓扑的状态。还可以用SVG的动画元素来实现拓扑中的一些特效和动画效果，SVG中的animate为动画元素，结合它自身的一些属性，可以形成动画效果。并可以用JAVASCRIPT去控制它们，结合形成动画效果。

三、多级网络展现

在最上层的根域的网络拓扑中，某个网络节点可能代表某个域，它下面还会有一个网络结构，如此类推，可能会有多级的网络结构，我们可以实现在这些多层次的拓扑间灵活切换。

SVG元素表现的拓扑节点如果代表域，并且下面还有网络结构的话，我们可以通过双击来切换，响应JAVASCRIPT中SVG双击事件，响应函数通过JAVASCRIPT通过操作dom节点的removeChild函数清除当前SVG中的所有DOM元素，并读取双击鼠标所在节点的另一级拓扑的SVG数据。这样就展现了该下级域的拓扑结构。在该域的拓扑结构中，会有一个节点表示上级域，双击可再返回上级域，实现原理和从上级切换到下级一样。

以下是部分示例代码：

//双击进去下级拓扑，读取下级设备：

function click(evt)

{

if(evt.detail＝＝2)

{

var target＝evt.target.parentNode；

var targettype＝target.getAttribute(″type″)；

var domainID＝target.getAttribute(″id″)；

var domainname＝target.getAttribute(″name″)；

if(targettype＝＝″normal″)

{

currentDomainName＝″root″；

clear()；

p.initheight()；

ajax.GetDomains(function(res){DrawSvg(res，false)；})；

}

else if(targettype＝＝″childDomain″)

{

currentDomainName＝domainname；

currentDomainID＝domainID；

clear()；

p.initheight()；

ajax.GetDevices(domainname，function(res){DrawDeviceSvg(domainID，res，false)；})；

}

isreload＝false；

isauto＝false；

}

//清除当前SVG元素

function clear()

{

var currentnode＝SVGRoot.firstChild；

while(currentnode！＝null)

{

var nextnode＝currentnode.nextSibling；

if(currentnode.tagName＝＝″g″)

{

SVGRoot.removeChild(currentnode)；

}

currentnode＝nextnode；

}

四、用户个性化

拓扑节点的排列和描述在刚第一次载入时都是有默认的排列算法和显示内容的，但当用户拖动拓扑中的网络节点，或是给节点添加备注时，系统可以实时的保存这些个性化信息。当用户下次登陆时，展现给用户的就是针对他的个性化的内容。

每个用户的个性化信息都保存在服务器上，以XML格式保存在服务器上，每个用户一个目录，里面存放着此用户的每个域的XML文件，每个XML文件里保存着一个域的所有节点信息，如位置，描述等。每当用户拖动节点，或是添加批注信息时，就会触发JAVASCRIPT事件去记录下这些信息，然后传给服务器，由服务器来更新用户的个性化信息XML。

这些个性化信息XML中也会保存用户的权限信息，这样，针对不同权限的用户所展示的节点信息也可以是不一样的。

五、导出图片

在操作中，我们可以任何时刻，在任何域上，需要将当前的拓扑展现以图片的形式导出。

在系统的右键菜单中，点击导出图片，响应JAVASCRIPT事件函数，在JAVASCRIPT程序中取得整个SVG图像的文本元素，通过JAVASCRIPT的ajax技术，将文本元素通过HTTP协议传到后台web服务器。web服务器接收到SVG元素后，后台服务器通过底层程序调用另外一个图像转换程序，将其转换成JPG(JPG全名是JPEG，Joint Photographic Experts GROUP)格式图片，并将JPG格式图片路径返回给用户的客户端，并利用JAVASCRIPT弹出导出框，实现用户的客户端保存功能。这样就可以保留某些拓扑结构的数据信息，非常实用。

综上所述，通过简单的JAVASCRIPT编程来操作XML元素就可以展现一个丰富的拓扑图。它可以方便的部署在B/S或C/S的软件中。

由上述实施例可以看出，本发明可以很快的开发出表现丰富，快速灵活，功能强大的拓扑图。开发出的拓扑图上可以表现出丰富的节点连线，设备拖拉，实时数据和实时状态的刷新，支持鼠标的各种事件响应，支持丰富的菜单项操作，还可做出特效和动画，可灵活的嵌入B/S和C/S软件界面中，并且交互灵活，可快速切换来展示不同层次网络的结构，并可实时保存用户的个性化位置和文字信息，并可导出实时拓扑图片，非常实用。相比于传统的C/S界面开发和HTML开发，该技术实现时表现丰富，开发难度相对要小，开发周期短，成本低，交互性强，实用性强。

显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。

Claims

1.一种使用SVG描述网络拓扑的方法，其特征在于，所述方法包括：

将上述步骤的数据信息存储在WEB服务器上。

2.如权利要求1所述的使用SVG描述网络拓扑的方法，其特征在于，使用SVG的文本对象元素来显示拓扑中的所有的文字描述和动态提示。

3.如权利要求1所述的使用SVG描述网络拓扑的方法，其特征在于，使用JAVASCRIPT中的settimeout函数，定时从所述web服务器上获取最新的状态数据，然后根据所述最新状态数据，由JAVASCRIPT程序来更改SVG对象元素的属性，实现定时刷新功能。

4.如权利要求1所述的使用SVG描述网络拓扑的方法，其特征在于，当SVG元素表现的拓扑节点代表域，并且该拓扑节点还包括网络结构时，则描述该拓扑节点的网络结构包括以下步骤：

从所述WEB服务器上读取该节点的下一级拓扑的SVG数据。

5.如权利要求1所述的使用SVG描述网络拓扑的方法，其特征在于，将每个用户的个性化信息以XML格式保存在WEB服务器上，每个用户一个目录，里面存放着此用户的每个域的XML文件，每个XML文件里保存着一个域的所有节点信息；每当用户修改节点信息时，JAVASCRIPT记录下这些信息，然后传给WEB服务器，由WEB服务器来更新用户的个性化信息。

6.如权利要求1所述的使用SVG描述网络拓扑的方法，其特征在于，在JAVASCRIPT中获取得整个SVG图像的文本元素，将该文本元素通过HTTP协议传到web服务器；