• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

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

JAVA web前端中文站 2年前 (2018-02-07) 8325次浏览 已收录 1个评论

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

更多精彩内容请看 web 前端中文站
http://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 查看。

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


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:使用 hightopo 实现 web 版网络拓扑图教程
喜欢 (10)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 哈哈哈哈哈哈哈哈
    王维2018-10-22 22:32 回复