创建HTML5画布电信网络拓扑图的方法

　　介绍

这篇文章给大家分享的是有关创建HTML5画布电信网络拓扑图的方法的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。

<强>前言

属性列表想必大家都不会陌生,正常用HTML5来做的属性列表大概就是用下拉菜单之类的,而且很多情况下,下拉列表还不够好看,怎么办?我试着用HT Web来实现属性栏点击按钮弹出多功能选框,对传入的数据进行选择的功能,感觉整体实践起来还是比较简单方便的,所以在这边跟大家分享一下。

<>强效果图

创建HTML5画布电信网络拓扑图的方法

<强>代码实现

<>强拓扑图

从上面的效果图中我们可以看的到,整个页面分为3个部分,左边的graphView一样拓扑图部分,右下角的tableView表格部分,以及右上角的propertyView属性部分。我们先把整个场景划分出来,然后再向各个部分来添加具体的内容:

问=new ht.graph.GraphView ();
　　var tablePane=new ht.widget.TablePane (gv.dm());//表格面板组件
　　propertyView=new ht.widget.PropertyView (gv.dm ());//formPane是在propertyView里的,所以要先定义
　　
　　新ht.widget var rightView=plitView (propertyView、tablePane & # 39; v # 39;, 0.4);//分割组件,v分为上下层,比例:0.6为0.4
　　.style rightView.getView ()。borderLeft=& # 39; 1 px固体# 000 & # 39;;
　　var borderPane=new ht.widget.BorderPane();//边框面板组件
　　borderPane。setRightView (rightView, 400);//设置borderPane右边组件为rightView,宽度为400
　　borderPane.setCenterView(问);//设置borderPane中间组件为全球之声
　　borderPane.addToDOM();//将borderPane组件添加进身体中

上面代码中新的出来的部分都是HT封装好的组件,相当于“类”,这里解释一下SplitView分割组件,分割组件用于左右或上下分割两个子组件,子组件可为HT框架提供的组件,也可为HTML的原生组件,子组件以位置为绝对的方式进行绝对定位,这个组件中的参数分别为(左组件或上组件,右组件或下组件,h表示左右分割v表示上下分割,分割位置默认值为0.5,如果设置值为0 ~ 1则按百分比分割,大于1代表左组件或上组件的绝对宽或高,小于1代表右组件或下组件的绝对宽或高);还有borderPane面板组件为布局容器,可在上,下,左,右,中的五个区域位置摆放子组件,子组件可为HT框架提供的组件,也可为HTML原生组件,子组件以位置为绝对的方式进行绝对定位。这里我结合了SplitView和borderPane将场景分成了三个部分。最后记得一定要将最终的布局容器添加进身体中或者任意一个HTML标签中,这样才能在界面上显示,其中addToDOM的定义内容如下:

 addToDOM=function () {
　　var自我=,
　　视图=self.getView()//获取这个组件的底层p
　　风格=view.style;//获取底层p的样式风格属性
　　document.body.appendChild(查看);//将底层p添加进身体中
　　风格。左=& # 39;0 & # 39;;//HT默认将组件都定义为决定定位绝对的,所以需要设置位置
　　风格。正确的=& # 39;0 & # 39;;
　　风格。顶级=& # 39;0 & # 39;;
　　风格。=& # 39;0 & # 39;;
　　window.addEventListener(& # 39;调整# 39;,函数(){self.iv ();},假);
　　}

HT的组件一般都会嵌入BorderPane, SplitView和TabView等容器中使用,而最外层的HT组件则需要用户手工将getView()返回的底层p元素添加到页面的DOM元素中,这里需要注意的是,当父容器大小变化时,如果父容器是BorderPane和SplitView等这些HT预定义的容器组件,则HT的容器会自动递归调用孩子组件失效函数通知更新。但如果父容器是原生的html元素,则HT组件无法获知需要更新,因此最外层的HT组件一般需要监听窗的窗口大小变化事件,调用最外层组件失效函数进行更新。

场景创建完毕。为了显示不同节点对应的属性的不同,我们在拓扑图上添加了七个节点:

函数initModel () {
　　var name=吧璞?;
　　var计算=0;
　　var根=createNode(名字+数+ + +(+ +计数));//参数1为名字,参数2为标记
　　root.setImage(& # 39;。/符号/机房/服务器. json # 39;);
　　root.setName(& # 39;服务器& # 39;);
　　增加(& # 39;label.position& # 39; (3);
　　gv.sm()授予(根);//默认选中根节点
　　
　　(var=0;我& lt;2;我+ +){
　　var iNode=createNode(名字+数+ + +(+ +计数));//参数1为名字,参数2为标记
　　createEdge(根,iNode);
　　(var j=0;j & lt;2;j + +) {
　　var jNode=createNode(名字+数+ + +(+ +数);
　　createEdge (iNode, jNode);
　　}
　　}
　　}
创建HTML5画布电信网络拓扑图的方法