使用 hightopo 实现web版网络拓扑图教程

hightopo 是一款收费软件，它可以很方便的帮助我们制作web版的网络拓扑图。它的底层是 HTML5 的 Canvas 实现。hightopo 的功能很强大，可以轻松实现基本网络图，网络拓扑图，机架图，网络通信图，3D网络图等其他几乎所有的拓扑图。本文将介绍如何使用?hightopo 来实现一款网页版的网络拓扑图。

在实现网络拓扑图之前，我们先来看一下，最终实现的效果：

引入文件后，主要实现代码如下：

 var line = createNode();
 //创建一个节点 line.setSize(725, 20);
 //设置节点大小 line.setPosition(310, 325);
 //设置节点位置 line.s({
 //设置节点的style属性'shape': 'roundRect',
 //决定shape的形状，默认值为空，代表用image绘制。roundRect四周圆角矩形     
 'shape.background': 'rgba(14,36,117,0.80)',
 //背景填充颜色，为null代表不填充背景     'shape.border.color': '#979797',
 //边框颜色  //该参数指定roundRect类型的圆角半径，默认为空系统自动调节，可设置正数值     
 'shape.corner.radius': 10,     'label': '内部网络交换机', //文字内容，默认为空     
 'label.position': 45,//文字内容，默认为空     
 'label.offset.x': 50,//文字水平偏移，对于Edge意味着沿着连线方向水平偏移  
 //HT默认除了label.*的属性外，还提供了label2.*的属性，用于满足一个图元需要显示双文字的情况     
 'label2': '内部网络交换机','label2.position': 48,'label2.offset.x': 50,
 'label2.offset.y': 2, }); createEdge(line, createNode('images/电脑.json', 
 cabinet, 185, 450), 'rgb(30,232,178)', -100, true); //参数1 源节点，参数2 终节点，参数3 连线颜色，参数4 连线起始点的水平偏移，参数5 是否创建两条连线 
 var exchange = createNode('images/交换机.json', null, -53, 313); 
 exchange.setHost(line);//设置吸附 
 line.setHost(exchange);//反吸附 又设置line的吸附为
 exchange dataModel.setAutoAdjustIndex(false);//将自动调整data在容器中索引顺序的开关关闭 
 dataModel.sendToTop(exchange);//将data在拓扑上置顶 
 function createGroup(name, x, y) {  
 //组类型 实际上也是一个节点     
 var group = new ht.Group();  //设置展开组     
 group.setExpanded(true);     
 group.setName(name);//设置组的名字     
 group.s({//设置组的样式style   //组展开后的title背景颜色，仅对group.type为空的类型起作用         
 'group.title.background': 'rgba(14,36,117,0.80)',   //组展开后的背景颜色         
 'group.background': 'rgba(14,36,117,0.40)',   
 //组展开后的title文字水平对齐方式，默认值为'left'，可设置为center和right         
 'group.title.align': 'center'     });     
 group.setPosition(x, y);//设置组的位置  
 //设置拓扑上展现的图片信息，在GraphView拓扑图中图片一般以position为中心绘制     
 group.setImage('images/服务器.json');     
 dataModel.add(group);//将创建的组节点添加进数据容器中//web前端中文站 www.lisa33xiaoq.net    
 return group; } function createNode(image, parent, x, y) {     
 var node = new ht.Node();//创建一个 Node 节点     
 if (image) node.setImage(image);//设置节点的显示图片     
 if (parent) node.setParent(parent);//设置节点的父亲     
 if (x && y) node.setPosition(x, y);//设置节点的位置     
 dataModel.add(node);//将节点添加进数据容器中  
 //www.lisa33xiaoq.net web前端中文站demo   
 return node; }

更多使用案例和教程，请登录http://hightopo.com/demos/index.html查看。

【注：本文源自网络文章资源，由站长整理发布】