详解快速开发基于 HTML5 网络拓扑图应用


Posted in HTML / CSS onJanuary 08, 2018

今天开始我们就从最基础解析如何构建 HTML5 Canvas 拓扑图应用,HT 内部封装了一个拓扑图形组件 ht.graph.GraphView(以下简称 GraphView)是 HT 框架中 2D 功能最丰富的组件,其相关类库都在 ht.graph 包下。GraphView 具有基本图形的呈现和编辑功能,拓扑节点连线及自动布局功能,电力和电信等行业预定义对象,具有动画渲染等特效,因此其应用面很广泛,可作为监控领域的绘图工具和人机界面,可作为一般性的图形化编辑工具,可扩展成工作流和组织图等企业应用。简单说来就是:拓扑图是泛化的说法,电信网管的网络拓扑图、电力的电网拓扑图、工业控制的监控图、工作流程图、思维脑图等等,简单说就是节点连线构成的这些都是这里指的拓扑图。

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

详解快速开发基于 HTML5 网络拓扑图应用

这个例子非常基础,几乎完成了服务器与客户端在拓扑上的所有功能。话不多说,猜猜看这个例子包括 HTML 标签的所有部分总共花了多少行代码?减去空行也就 50 行,我还做了很多样式部分的设计,毕竟给大家看的例子不能太丑嘛~

大家可以在 tuputu_3water.rar 自行下载代码,注意因为有 json 文件,会存在图片跨域问题,需要用 Firefox 或者本地服务器跑起来。

我们在最开始就说明一下,HT 是基于 HTML5 标准的企业应用图形界面一站式解决方案, 其包含通用组件、拓扑组件和 3D 渲染引擎等丰富的图形界面开发类库,用户只需要引入 ht.js 即可,而且跟别的任何东西完全不冲突,因为 HT 只是声明了一个全局变量 ht,仅此而已。

接下来解析代码部分,首先,搭建拓扑图场景:

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

HT 的所有组件的根部都是一个 div,通过 getView() 方法获取,我们在 addToDOM 方法中就用到了这个方法:

addToDOM = function(){   
    var self = this,
        view = self.getView(),  //获取组件底层 div
        style = view.style; 
    document.body.appendChild(view);//将底层 div 添加进 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 个:

  1. 引入 ht-dashflow.js 文件 ;
  2. 将连线的样式属性 edge.dash.flow 设置为 true;
  3. 在场景组件中打开虚线流动的开关,这里就是 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 )上学习,希望大家能有更多的收获,学习是自己的事情,快动手实践将这片文章的内容变成你自己的知识吧!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS实现的一闪而过的图片闪光效果
Apr 23 HTML / CSS
五款漂亮的纯CSS3动画按钮的实例教程
Nov 21 HTML / CSS
利用CSS3实现单选框动画特效示例代码
Sep 26 HTML / CSS
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
Aug 18 HTML / CSS
浅谈CSS3中的变形功能-transform功能
Dec 27 HTML / CSS
CSS3 实现童年的纸飞机
May 05 HTML / CSS
Canvas制作旋转的太极的示例
Mar 09 HTML / CSS
用canvas做一个DVD待机动画的实现代码
Apr 12 HTML / CSS
基于Html5实现的语音搜索功能
May 13 HTML / CSS
使用canvas一步步实现图片打码功能的方法
Jun 17 HTML / CSS
html5自定义video标签的海报与播放按钮功能
Dec 04 HTML / CSS
浅谈由position属性引申的css进阶讨论
May 25 HTML / CSS
浅谈HTML5 Web Worker的使用
Jan 05 #HTML / CSS
详解基于canvas的视频遮罩插件
Jan 04 #HTML / CSS
详解HTML5中的picture元素响应式处理图片
Jan 03 #HTML / CSS
canvas 阴影和图形变换的示例代码
Jan 02 #HTML / CSS
canvas仿写贝塞尔曲线的示例代码
Dec 29 #HTML / CSS
Canvas绘制浮动球效果的示例
Dec 29 #HTML / CSS
微信小程序“圣诞帽”的实现思路详解
Dec 28 #HTML / CSS
You might like
CI框架中$this->load->library()用法分析
2016/05/18 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
jquery 框架使用教程 AJAX篇
2009/10/11 Javascript
js 获取Listbox选择的值的代码
2010/04/15 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
2013/07/05 Javascript
js setTimeout 常见问题小结
2013/08/13 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
2013/12/13 Javascript
浅谈JavaScript字符集
2014/05/22 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
highcharts 在angular中的使用示例代码
2017/09/20 Javascript
JavaScript事件委托原理与用法实例分析
2018/06/07 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
详解vue2.0模拟后台json数据
2019/05/16 Javascript
node读写Excel操作实例分析
2019/11/06 Javascript
vue使用screenfull插件实现全屏功能
2020/09/17 Javascript
js轮播图之旋转木马效果
2020/10/13 Javascript
[56:01]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 Effect vs EG
2018/03/31 DOTA
[00:48]DOTA2国际邀请赛公开赛报名开始 扫码开启逐梦之旅
2018/06/06 DOTA
初步解析Python下的多进程编程
2015/04/28 Python
python脚本监控docker容器
2016/04/27 Python
Jupyter安装nbextensions,启动提示没有nbextensions库
2020/04/23 Python
python十进制和二进制的转换方法(含浮点数)
2018/07/07 Python
Python神奇的内置函数locals的实例讲解
2019/02/22 Python
Python利用全连接神经网络求解MNIST问题详解
2020/01/14 Python
tensorflow入门:tfrecord 和tf.data.TFRecordDataset的使用
2020/01/20 Python
Python多重继承之菱形继承的实例详解
2020/02/12 Python
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
Pretty Green美国:英式摇滚服饰风格代表品牌之一
2019/01/23 全球购物
自荐信格式范文
2013/10/07 职场文书
人力资源经理自我评价
2014/01/04 职场文书
小学生运动会通讯稿
2014/09/23 职场文书
付款委托书范本
2014/10/05 职场文书
人大代表选举标语
2014/10/07 职场文书
工作失误检讨书(经典集锦版)
2014/10/17 职场文书
毕业论文致谢词
2015/05/14 职场文书