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

公告：“业余草”微信公众号提供免费CSDN下载服务(只下Java资源)，关注业余草微信公众号，添加作者微信：xttblog2，发送下载链接帮助你免费下载！
本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序

腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云

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);//将创建的组节点添加进数据容器中
	//www.xttblog.com
    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.xttblog.com
    return node;
}

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

最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！

本文原文出处：业余草： » 使用 hightopo 实现web版网络拓扑图