怎样新建HTML5Canvas电信网络拓扑图-
前言
属性列表想必大家都不会生疏，正常用 HTML5 来做的属性列表大约就是用下拉菜单之类的，并且许多状况下，下拉列表还不足好看，怎么办？我试着用 HT for Web 来实现属性栏点击按钮弹出多功能选框，对传入的数据进行选中的功能，感觉整体实践起来还是比拼简略利便的，所以在这边跟大家分享一下。
结果图
代码实现
拓扑图
从上面的结果图中我们可以看到，整个页面分为 3 个局部，左边的 graphView 拓扑图局部，右下角的 tableView 表格局部，以及右上角的 propertyView 属性局部。我们先把整个场景划分出来，然后再向各个局部来增加概括的内容：
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 中
上面代码中 new 出来的局部都是 HT 封装好的组件，相当于“类”，这里解释一下 SplitView 分割组件，分割组件用于摆布或高低分割两个子组件， 子组件可为 HT 框架供给的组件，也可为 HTML 的原生组件，子组件以 position 为 absolute 方式进行绝对定位，这个组件中的参数离别为（左组件或上组件， 右组件或下组件，h 表示摆布分割 v 表示高低分割，分割位置默许值为 0.5，要是设定值为 0~1 则按百分比分割，大于 1 代表左组件或上组件的绝对宽或高，小于 1 代表右组件或下组件的绝对宽或高）；还有 BorderPane 面板组件为布局容器，可在上、下、左、右、中的五个区域位置摆放子组件， 子组件可为 HT 框架供给的组件，也可为 HTML 原生组件，子组件以 position 为 absolute 方式进行绝对定位。这里我联合了 SplitView 和 BorderPane 将场景分成了三个局部。最跋文得一定要将终究的布局容器增加进 body 中或者任意一个 HTML 标签中，这样才干在界面上显示，其中 addToDOM 的定义内容如下：
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 的组件个别都会嵌入 BorderPane、SplitView 和 TabView 等容器中运用，而最外层的 HT 组件则需要会员手工将 getView() 返回的底层 p 元素增加到页面的 DOM 元素中，这里需要注意的是，当父容器大小变化时，要是父容器是 BorderPane 和 SplitView 等这些 HT 预定义的容器组件，则 HT 的容器会主动递归调取孩子组件 invalidate 函数通知更新。但要是父容器是原生的 html 元素， 则 HT 组件没法获知需要更新，因而最外层的 HT 组件个别需要监听 window 的窗口大小变化事件，调取最外层组件 invalidate 函数进行更新。
场景新建结束。为了显示不一样节点对应的属性的不一样，我们在拓扑图上增加了七个节点：
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);
}
}
}createNode 函数的声明如下：
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;
}我们通过控制这个节点的 hidden 属性，应用 graphView 中的可视过滤器 setVisibleFunc 函数来控制节点的显隐：
gv.setVisibleFunc(function(data){
if(data.a('hidden')){
return false;
}
return true;
});属性面板
有了节点天然就需要显示属性了，加高低面的 tablePane 表格面板中的值，一共增加了七种属性：
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: '型号',
}
]);
}第三第四个属性中 drawPropertyValue 属性的返回值为 fillFormPane 函数，这个函数的参数离别为（表单组件 formP，表单组件宽 w，表单组件高 h，表单组件中按钮点击生成弹出框中的表格组件 tableP，表格组件中的数组内容 arr，cb 函数将双击表格组件中的行返回的值赋值给 form 表单中的 ht.widget.TextField 文本框）。
首先个参数 formP 表单组件的新建，表单组件的新建就是新建一个表单组件，在表单组件中增加一个文本框以及一个按钮，这个步骤在 HT 中也是相当的简略：
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;
}createDialog 函数新建的历程也是简约明了，通过 setConfig(config) 办法配置对话框的标题，尺寸，内容等，我给 createDialog 传了一个参数 tPane 表格组件，用作对话框显示的内容：
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();//显示对话框
}第四个参数 tableP 表格组件，也没有什么特殊的，就是新建一个表单组件，然后向表单组件中增加列，步骤简略，代码也相当简略：
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;
}解释完 fillFormPane 中的参数，来看看这个函数是怎样定义的，根本上只差最后一步，点击 tablePane 表格组件中的元素，将这个元素返回给 formPane 表单组件中的 textField 文本框：
function fillFormPane(formP, w, h, tableP, arr, cb){//右侧的formpane
if(formP === undefined){
return;
}
formP.setWidth(w);
formP.setHeight(h);
formP.setHGap(0);
if(formP.v('tag') === 'undefined' || formP.v('tag') === '') {
formP.v('tag', arr[0]);
}
tableP.onDataDoubleClicked = function(data){//表格组件中的data所在行被双击时回调
var v = arr[data.a('index')];
formP.v('tag', v);//依据id设定对应item元素值 为 setValue 的简写，这个id为tag的元素就是文本框
dialog.hide();
if (cb){cb(v);} //要是传入了cb参数，则设定data.a('number')/data.a('helloName')的值为表格中被双击的那一行的值，即赋值给第三第四属性
}
tableP.onDataClicked = function(data){//表格组件中的data所在行被单击时回调
dialog.getConfig().buttons[1].action = function(){//点击“肯定”才进行下面的操纵
var v = arr[data.a('index')];
formP.v('tag', v);
dialog.hide();
if (cb){cb(v);}
}
};
return formP.getView();
}function fillFormPane(formP, w, h, tableP, arr, cb){//右侧的formpane
if(formP === undefined){
return;
}
formP.setWidth(w);
formP.setHeight(h);
formP.setHGap(0);
if(formP.v('tag') === 'undefined' || formP.v('tag') === '') {
formP.v('tag', arr[0]);
}
tableP.onDataDoubleClicked = function(data){//表格组件中的data所在行被双击时回调
var v = arr[data.a('index')];
formP.v('tag', v);//依据id设定对应item元素值 为 setValue 的简写，这个id为tag的元素就是文本框
dialog.hide();
if (cb){cb(v);} //要是传入了cb参数，则设定data.a('number')/data.a('helloName')的值为表格中被双击的那一行的值，即赋值给第三第四属性
}
tableP.onDataClicked = function(data){//表格组件中的data所在行被单击时回调
dialog.getConfig().buttons[1].action = function(){//点击“肯定”才进行下面的操纵
var v = arr[data.a('index')];
formP.v('tag', v);
dialog.hide();
if (cb){cb(v);}
}
};
return formP.getView();
}右上方属性栏的显示到这里就全部完毕了，右下方的表格面板的新建方式也是相同的，大家可以自行看代码了解。
主动布局
最后说一下整个界面节点的排布，HT 中的 autolayout 主动布局组件，即依据节点和连线关系，供给多品种型算法进行主动排布节点位置。 主动布局常用于图元较多，或连贯关系教复杂时，不易于人工拖拽摆放的场景。我把各个布局方式通过按钮的方式呈现出来了，点击对应的按钮，布局方式就会依据按下的按钮设定的排布方式来主动布局：
第一，新建一个新的实例，传入需要主动布局的对象，可认为 DataModel、graphView 以及 graph3dView 三种，然后设定默许的排布方式：
autoLayout = new ht.layout.AutoLayout(gv);
setTimeout(function(){
layout('towardsouth', true);//由于图片还没加载出来的时候，主动布局就按照节点的默许大小来布局的
}, 200);接着新建 formPane 表单面板，增加进 body 中，放在 body 左上角，我不将所有代码粘出来了，就显示首先个布局的按钮就好：
function createDirectionForm(){
var form = new ht.widget.FormPane();
form.setWidth(200);//设定表单宽度
form.setHeight(80);
document.body.appendChild(form.getView());
form.getView().style.background = '#fff';
form.getView().style.boxShadow = '4px 16px 16px rgba(0, 0, 0, 0.1)';//设定暗影样式
form.addRow([//这一行独自拿出来，作为标题
{
element: '主动布局:',//显示的文字
}
], [0.1]);//数组内只要一个对象，就只设定一个对象的宽度就好
form.addRow([
{
button: {
icon: '布局/南布局.json',
onClicked: function(){
layout('towardsouth', true);
},
background: null,
labelColor: '#fff',
groupId: 'btn',
toolTip: '朝南布局',
borderColor: null
}
},
//....接下来增加剩下的6个按钮
], [0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1]);//数组中有七个对象，就要设定七个对象的宽度
return form;
}以上就是本文的全部内容，但愿对大家的学习有所帮忙，更多相干内容请关注百分百源码网！
