| var server = new ht.Node(); server.setName('server');//设置节点名称，显示在节点下方 server.setImage('serverImage');//设置节点图片 server.setSize(20, 60);//设置节点大小 dm.add(server);//将节点添加进数据容器dm中 server.setPosition(100, 100);//设置节点坐标(x, y) var group = new ht.Group();//组，组中可以有多个节点 group.setImage('groupImage');//设置图片 dm.add(group); var client = new ht.Node();//这个节点是添加进组中的 client.setName('client'); client.setImage('clientImage'); dm.add(client); group.addChild(client);//组添加孩子 group.setExpanded(true);//设置组为展开模式 client.setPosition(200, 100);//设置节点位置 如果组中只有一个节点，那么这个节点的位置可以为组的位置 |
服务端与客户端的连线？2 行代码搞定！其实 HT 中添加节点的方法非常简单，一般就 2 行代码能结束：先声明实例变量，然后将这个实例变量添加进数据容器中。
| var edge = new ht.Edge(server, client); dm.add(edge); |
我们很好奇虚线是怎么做出来的？虚线的形成是搭建在连线之上的，步骤有 3 个：
-
引入 ht-dashflow.js 文件 ;
将连线的样式属性 edge.dash.flow 设置为 true；
在场景组件中打开虚线流动的开关，这里就是 gv.enableDashFlow(true);
是不是非常简单！接下来我们看看怎么设置：
| edge.s({//节点设置样式属性 'edge.dash': true,//显示虚线 'edge.dash.flow': true,//开启虚线流动 'edge.dash.color': 'yellow',//虚线颜色 'edge.dash.pattern': [8, 8],//虚线样式 'label': 'flow',//节点注释 'label.background': 'pink',//节点注释背景颜色 }); |
这样所有的显示部分就介绍完毕啦~等等，好像还少点什么？对了，我忘了介绍 HT 中的 ht.Group 类了，顾名思义，就是“组”的意思，组中可以包含很多节点，双击可显示或隐藏组内的所有节点，上面代码有写到，但是我还做了一点小动作，就是组右上角的显示部分，其实就是一个标注，用来提示说明的：
| group.s({ 'group.background': 'rgba(255, 255, 0, 0.1)',//设置组的背景颜色 'note': "Double click me!",//标注 显示的内容 'note.position': 13,//标注位置 'note.offset.y': 10,//标注位置y轴偏移 }); |
我们可以通过 note.position 来改变标注的位置（具体位置信息请参考HT for Web 位置手册 ），也可以使用 note.offset.x 和 note.offset.y 来改变标注的位置。
全部代码解析完毕！我会尽快更新，如果大家觉得进度慢的话，可以自己去我们官网（ HT for Web ）上学习，希望大家能有更多的收获，学习是自己的事情，快动手实践将这片文章的内容变成你自己的知识吧！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易采站长站。
