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

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

更多精彩内容请看 web前端中文站
www.lisa33xiaoq.net 可按Ctrl + D 进行收藏

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

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

引入文件后,主要实现代码如下:

 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查看。

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

1
如无特殊说明,文章均为原作者原创,转载请注明出处

该文章由 发布

这货来去如风,什么鬼都没留下!!!
发表我的评论

Hi,请填写昵称和邮箱!

取消评论
代码 贴图 加粗 链接 删除线 签到

(1)条精彩评论:
  1. <a href='http://www.baidu.com' rel='external nofollow' class='url'>王维</a>
    哈哈哈哈哈哈哈哈
    王维2018-10-22 22:32 回复