1. HTML5 Canvas 电信网络拓扑图简介
现在，网络通信是咱们生活和工作中的必需品了。电信网络拓扑图这个东西，能让你看得明明白白，它就像地图一样，显示出网络结构和连线，对网络规划和维修都有很大帮助。你知道吗？用HTML5 Canvas这个技术可以做出个特别实用的电信网络拓扑图。用户看了就知道那些节点怎么互相联络起来，这样一来就能帮大家大大提升网络管理的效率！
搞定这个HTML5Canvas的电信网络拓扑图，咱们得琢磨着怎么让用户更顺畅地用起来，比如怎么摆界面，加上特性选项框啥的，还得允许他们自己弄个节点出来。只要排布得当，功能好用，这就肯定能让他们用起来顺手多了，感觉也好不少！
gv = new ht.graph.GraphView(); var tablePane = new ht.widget.TablePane(gv.dm());//表格面板组件 propertyView = new ht.widget.PropertyView(gv.dm());//formPane是在propertyView里的，所以要先定义 var rightView = new ht.widget.SplitView(propertyView, tablePane, 'v', 0.4);//分割组件，v分为上下层，比例为0.4:0.6 rightView.getView().style.borderLeft = '1px solid #000'; var borderPane = new ht.widget.BorderPane();//边框面板组件 borderPane.setRightView(rightView, 400);//设置 borderPane 右边组件为 rightView，宽度为400 borderPane.setCenterView(gv);//设置 borderPane 中间组件为 gv borderPane.addToDOM();//将 borderPane 组件添加进 body 中
用Web HT来搞定，点下属性栏的按钮就能弹出个超好用的选项框。
哈提的网页版就是个好用的绘图工具包，它好多漂亮的组件和实用的功能，帮助咱们这些程序员能快速搞定互动图形界面。平时用起来，咱们就可以靠着哈提网页版来搞个对象属性栏里点按钮可以出现多个选择的小窗口，这样用户就不用愁传过来的资料怎么选~
addToDOM = function(){
var self = this,
view = self.getView(), //获取这个组件的底层 p
style = view.style;//获取底层 p 的样式 style 属性
document.body.appendChild(view); //将底层 p 添加进 body 中
style.left = '0';//HT 默认将组件都定义为决定定位 absolute，所以需要设置位置
style.right = '0';
style.top = '0';
style.bottom = '0';
window.addEventListener('resize', function () { self.iv(); }, false);
}
用HT的Web组件和方法，咱们就可以搞定属性栏的设计和互动功能！比如说，点个按钮就能出现选择框，或者数据也可以随便筛选这个办法特别好使，啥项目都适用~
3.页面整体结构及布局
做HTML5 Canvas电信网络拓扑图时，我们可以把网页分成3块。左边是看图区域（叫作graphView），右边的最下面是看表区域（tableView），右边上面一点点是看属性的地方（propertyView）。这样设计的目的就是为了让大家能看清网络结构，还能快速了解更多细节和特点。
function initModel(){
var name = "设备";
var count = 0;
var root = createNode(name + count++, name + (++count));//参数1为name，参数2为tag
root.setImage('./symbols/机房/服务器.json');
root.setName('服务器');
root.s('label.position', 3);
gv.sm().ss(root);//默认选中root节点
for (var i = 0; i < 2; i++) {
var iNode = createNode(name + count++, name + (++count));//参数1为name，参数2为tag
createEdge(root, iNode);
for (var j = 0; j < 2; j++) {
var jNode = createNode(name + count++, name + (++count));
createEdge(iNode, jNode);
}
}
}
用BorderPane这个面板插件布置网页，用着超好用！它分五个区上下左右中和中间，我们就能随意往这些地方放内容，而且还有绝对定位功能，布局随你怎么变都行，好用到爆！
function createNode(name, tag){//创建Node节点
flag++;
var node = new ht.Node();
node.setName(name);
node.setTag(tag);
node.setImage('./symbols/机房/XX分系统.json');
node.a('hidden', false);//自定义属性，可以控制node.a('hidden')来控制节点显隐
node.a('接口类型', 'SATA');
node.a('显卡', 'Nvidia');
if(flag % 2 === 0){
node.a('接口类型', 'IDE');
node.a('显卡', 'ATI');
}
node.s('label.position', 11);
gv.dm().add(node);//将节点添加进数据容器DataModel中
node.tablePane1 = createTableView(serviceType, dataModel1);//创建表格面板
node.tablePane2 = createTableView(serviceSize, dataModel2);
node.tablePane3 = createTableView(version, dataModel3);
node.formPane1 = createFormPane(node.tablePane1);//创建表单面板
node.formPane1.title = '类型';//为了给后面dialog对话框的标题做准备
node.formPane2 = createFormPane(node.tablePane2);
node.formPane2.title = '内存';
node.formPane3 = createFormPane(node.tablePane3);
node.formPane3.title = '型号';
if(flag % 3 === 0){
node.formPane3.v('tag', '联想（Lenovo）服务器X3650M5 8871');
}else{
node.formPane3.v('tag', 'Lenovo IBM X3250 5458I21');
}
node.a('型号', node.formPane3.v('tag'));
return node;
}
4. HT组件嵌入与DOM元素添加
gv.setVisibleFunc(function(data){
if(data.a('hidden')){
return false;
}
return true;
});
在网上用HT做网页，组件可以放在BorderPane、SplitView和TabView这些容器里。然后，如果是最外面那个HT组件，就得自己动手把getView()函数返回的per element加到你的网页DOM里这样才能显示出来！
要记住，虽然HT预定义的容器组件可以智能地调整大小，让子组件也跟着变呢；但是普通的HTML元素就没有这个功能了。所以，要是遇到这种情况的话，最外面的那层HT组件得自己留意着窗口尺寸的变动，然后手动去触发更新函数喔~
function createProperty(){//创建属性
propertyView.addProperties([
{
name: 'name',//获取 name 属性，结合 accessType 属性最终实现对节点属性的存取，accessType 默认值为 null，如name为age，采用getAge()和setAge(98)的get/set或is/set方式存取(这边name为name，所以通过 getName() 获取)
displayName: '名称'//设置属性名的显示文本值
},
{
name: 'hidden',//获取 hidden 属性
displayName: '隐藏这个节点',
accessType: 'attr',//如name为hidden，采用getAttr('hidden')和setAttr('hidden', false)的方式存取
icon: 'images/alert.gif',//设置属性名左侧显示的图标
valueType: 'boolean',//用于提示组件提供合适的renderer渲染 布尔类型，显示为勾选框
editable: true//设置该属性是否可编辑
},
{
name: 'grade',
displayName: '类型',
accessType: 'attr',
drawPropertyValue: function(g, property, value, rowIndex, x, y, w, h, data, view){//自定义属性值渲染函数
var cb = function(v) {
data.a('grade', v);
}
return fillFormPane(data.formPane1, w, h, data.tablePane1, serviceType, cb);
}
},
{
name: 'number',
displayName: '内存',
accessType: 'attr',
drawPropertyValue: function(g, property, value, rowIndex, x, y, w, h, data, view){
var cb = function(v) {
data.a('number', v);
}
return fillFormPane(data.formPane2, w, h, data.tablePane2, serviceSize, cb);
}
},
{
name: '接口类型',
accessType: 'attr',
displayName: '接口类型'
},
{
name: '显卡',
accessType: 'attr',
displayName: '显卡'
},
{
name: '型号',
accessType: 'attr',
displayName: '型号',
}
]);
}
5.节点属性显示与表格面板
记住，节点属性对看懂网络拓扑图很有帮助！把这些属性的数值在表格里一展示，就能一眼看出每个节点的详细情况了。比如说，节点名字连接状态，以及IP地址什么的，都是我们常见的属性信息。
function createFormPane(tPane) {//创建表单面板
var formPane = new ht.widget.FormPane();
formPane.setPadding(0);//设置表单四周与组件内容的间距
var tField = new ht.widget.TextField();//创建一个文本框
tField.setText('');//文本框的内容为空
tField.setDisabled(true);//文本框不可操作
formPane.addRow([//向表单中添加行
{
id: 'tag',//唯一标示属性，可通过formPane.getItemById(id)获取添加到对应的item对象
element: tField//属性值可为 HTML原生元素、FormPane内部自绘制的文本信息以及HT自带组件如Button、CheckBox和ComboBox等
},
{
button:{//设置了该属性后HT将根据属性值自动构建ht.widget.Button对象，并保存在element属性上
label:'...',//按钮上的文本内容
onClicked: function(){//按钮点击事件
for(var i = 0; i < tPane.dm().size(); i++){//设置tablePane默认选中formPane对应的值
var data = tPane.dm().getDatas().get(i);
if(data.a('value') === formPane.v('tag')){
tPane.sm().ss(data);
}
}
return createDialog(tPane, formPane);//返回的是创建一个对话框，对话框的内容为表格面板
}
}
}
], [0.5, 0.1]);//设置表格组件中第一个元素和第二个元素的显示比例。这个表格组件一共只有两个元素，一个文本框一个按钮，占比分别为 0.5 和 0.1
return formPane;
}
只需短短几行代码，就能搞定表单组件！随便加几个列就能展示不同的节点属性。然后用户只要点一下表格元素，就能把信息回传到对应的文本框或者其他输入框里咯。
6.自动布局与排布方式设置
HTML5Canvas的一个重要功能就是自动布局，它能让我们绘制出的网络拓扑图更漂亮好懂。Web上就有一款HT for Web的autolayout插件，可以帮我们轻松搞定各种布局问题。
无论是设默认排列还是让大家动手选别的排列，都能帮助我们自动微调节点的位置来应对不同情景所需！这样子，大家就能更自由地操控整张图，呈现出最美的效果~
function createDialog(tPane){//创建弹出框
dialog.setConfig({
title: gv.sm().ld().getName()+"的"+formPane.title,//对话框的标题
content: tPane, //直接将弹出框的内容设置为表格面板
width: 400,//指定对话框的宽度
height: 200,
draggable: true,//指定对话框是否可拖拽调整位置
closable: true,//表示是否显示关闭按钮
maximizable: true,//表示对话框是否可被最大化
resizeMode: "wh",//鼠标移动到对话框右下角可改变对话框的大小，wh表示宽高都可调整
buttons: [//添加两个按钮
{
label: '取消',
action: function(){
dialog.hide()
}
},
{
label: '确定',
}
]
});
dialog.show();//显示对话框
}
7.总结与展望
总的说来，要用HTML5 Canvas做个电信网拓扑图可是不难！你只需要用上个叫HT for Web那个小神器就能搞定各种漂亮的互动动画了。还有就是，搞个好点的页面结构啊、布局啥的就不用说了，当然，加上属性栏和表格这样的小细节更能提高体验！最重要的，咱们还可以让每个节点都有自己特定的小小功能，这不就是省事儿又方便。
function createTableView(arr, dm){//创建表格组件
var tableView = new ht.widget.TableView(dm);
tableView.addColumns([//用json的数组参数方式批量添加列信息
{
displayName: 'ID',//获取表头的列名内容
drawCell: function(g, data, selected, column, x, y, w, h, tableView){//自定义单元格渲染方式
var id = tableView.getRowIndex(data);//返回data对象所在的行索引
ht.Default.drawText(g, 'row' + (id + 1), null, null, x, y, w, h, 'center');//绘制文字参数(g画笔对象，value文字内容，font文字字体，color文字颜色，x绘制开始的x坐标，y绘制开始的y坐标，w绘制的宽度，h绘制的高度，align文字水平对齐方式，vAlign文字垂直对齐方式)
}
},
{
displayName: 'Name',
drawCell: function(g, data, selected, column, x, y, w, h, tableView){
var id = tableView.getRowIndex(data);
var info = arr[id];
ht.Default.drawText(g, info, null, null, x, y, w, h, 'center');
}
}
]);
return tableView;
}
今后，我们还能通过提升技术水平来发挥机器学习算法更好地优化自动排版，以及提高数据处理速度等等。希望这篇文章能帮到想了解HTML5 Canvas电信网络拓扑图的你！
评论0