HTML5网络拓扑图利用实例解说--百分百源码网

HTML5网络拓扑图利用实例解说-

发布时间：08/01 来源：未知浏览：关键词：

本文主要介绍了详解迅速开发基于HTML5网络拓扑图利用的相干材料,小编觉得挺不错的，此刻分享给大家，也给大家做个参照。一起追随小编过来看看吧，但愿能帮忙到大家。本文主要介绍了详解迅速开发基于 HTML5 网络拓扑图利用的相干材料,小编觉得挺不错的，此刻分享给大家，也给大家做个参照。一起追随小编过来看看吧，但愿能帮忙到大家。

今天开端我们就从最根基解析怎样构建 HTML5 Canvas 拓扑图利用，HT 内部封装了一个拓扑图形组件 ht.graph.GraphView（下列简称 GraphView）是 HT 框架中 2D 功能最丰硕的组件，其相干类库都在 ht.graph 包下。GraphView 拥有根本图形的呈现和编纂功能，拓扑节点连线及主动布局功能，电力和电信等行业预定义对象，拥有动画渲染等特效，因而其利用面很宽泛，可作为监控领域的画图工具和人机界面，可作为个别性的图形化编纂工具，可扩展成工作流和组织图等公司利用。简略说来就是：拓扑图是泛化的说法，电信网管的网络拓扑图、电力的电网拓扑图、工业控制的监控图、工作流程图、思维脑图等等，简略说就是节点连线形成的这些都是这里指的拓扑图。

用 HT 开发一个网络拓扑图是非常容易的一件事，只需要短短几行代码就能完成一个简略的办事器与客户端的拓扑图：

dm = new ht.DataModel();//数据容器
gv = new ht.graph.GraphView(dm);//拓扑组件 参数为dm 绑定的数据模型
gv.addToDOM();//将拓扑图增加进body体中

HT 的所有组件的根部都是一个 p，通过 getView() 办法猎取，我们在 addToDOM 办法中就用到了这个办法：

addToDOM = function(){   
    var self = this,
        view = self.getView(),  //猎取组件底层 p
        style = view.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); //事件监听窗口大小变化，iv 为延时刷新组件         
}

然后向拓扑场景中增加“办事器”以及“客户端”节点：

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 ）上学习，但愿大家能有更多的收成，学习是本人的事情，快动手实践将这片文章的内容酿成你本人的见识吧！

打赏