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 查看。
【注：本文源自网络文章资源，由站长整理发布】
