hightopo 是一款收费软件,它可以很方便的帮助我们制作 web 版的网络拓扑图。它的底层是 HTML5 的 Canvas 实现。hightopo 的功能很强大,可以轻松实现基本网络图,网络拓扑图,机架图,网络通信图,3D 网络图等其他几乎所有的拓扑图。本文将介绍如何使用?hightopo 来实现一款网页版的网络拓扑图。
更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏
在实现网络拓扑图之前,我们先来看一下,最终实现的效果:
引入文件后,主要实现代码如下:
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 查看。
【注:本文源自网络文章资源,由站长整理发布】