快速开发基于 HTML5 网络拓扑图应用--入门篇(二)

简介: 上一篇我们绘制了一个 graphView 场景,在场景之上通过 graphView.dm() 获取数据容器,并通过 graphView.dm().add() 函数添加了两个 Node 节点,并通过 setPosition 设置节点位置以及 setImage 给节点添加图片;接着在两个节点之间通过 ht.Edge(sourceNode, targetNode) 添加了两条连线(实际上还可以更多),并给连线添加了 label 标签显示文字,同时也通过 label.position 设置了文字在连线上的位置。

上一篇我们绘制了一个 graphView 场景,在场景之上通过 graphView.dm() 获取数据容器,并通过 graphView.dm().add() 函数添加了两个 Node 节点,并通过 setPosition 设置节点位置以及 setImage 给节点添加图片;接着在两个节点之间通过 ht.Edge(sourceNode, targetNode) 添加了两条连线(实际上还可以更多),并给连线添加了 label 标签显示文字,同时也通过 label.position 设置了文字在连线上的位置。

这一篇我的想法是在左侧添加一个显示所有节点的“树”节点列表,就是将场景中所有的节点都添加到这个“树”列表中。这个部分在我看来简直是简单到极点啊,当然,HT 很多组件都跟这个类似,非常方便。

首先我们得创建这个“树”,HT 中的 ht.widget.treeView 组件就是用来创建“树列表”的。我们在上一篇中有介绍过 addToDOM 函数,用来将组件添加进 body 体中,我们要实现左边是“数列表”右边是拓扑场景,该如何做呢?这里再引入一个组件 ht.widget.SplitView,顾名思义“分割”组件。分割组件用于左右或上下分割两个子组件, 子组件可为HT框架提供的组件,也可为 HTML 的原生组件,子组件以 position 为 absolute 方式进行绝对定位。

通过 splitView = new ht.widget.SplitView( leftView, rightView, orientation, position )初始化构建一个分割组件对象。leftView 左组件或上组件  rightView 右组件或下组件 orientation 字符串类型,默认为 horizontal 或 h 代表左右分割,可设为 vertical 或 v 代表上下分割 position 分割位置,默认值为 0.5,如果设置值为 0~1 则按百分比分割,大于 1 代表左组件或上组件的绝对宽或高,小于 1 代表右组件或下组件的绝对宽或高。

通过分割组件我们树组件和拓扑组件同时添加进 body 体中,需要的操作只有如下几行:

graphView = new ht.graph.GraphView();//拓扑组件
var treeView = new ht.widget.TreeView(graphView.dm());//树组件,参数为树组件绑定的数据模型,这里绑定的是 graphView 的数据模型,就可以进行数据共享
var splitView = new ht.widget.SplitView(treeView, graphView, 'h', 0.2);//分割组件 (leftView, rightView, orientation, position)
splitView.addToDOM();//将 splitView 添加进 body 中

记住,原代码中的 graphView.addToDOM 语句得注释掉,否则后面添加到 body 体中的组件的根层 div 会覆盖住上一个添加进 body 体中的组件的底层 div,大家还记得吧? addToDOM 函数的定义,这里我再次将函数的定义给大家展示一下,大家可以巩固一下:

addToDOM = function(){   
    var self = this,
        view = self.getView(),   //获取组件的底层 div
        style = view.style;
    document.body.appendChild(view); //将组件的底层 div 添加进 body 中           
    style.left = '0';// HT 的绝大部分组件都是绝对定位,所以需要设置位置
    style.right = '0';
    style.top = '0';
    style.bottom = '0';      
    window.addEventListener('resize', function () { self.iv(); }, false); //添加 resize 事件,iv 为延时刷新           
}

其他部分我们都没有动,效果如下:

 

 这样看着好像不太明确到底拓扑图上的哪部分是树列表上的元素?不急,我们继续,给我们的所有节点都设置上“名称”,为了不混淆视听,我将之前的代码也粘出来,也顺便复习一下(这里只显示其中一个节点的代码):

var server = new ht.Node();//服务器节点
graphView.dm().add(server);// 将服务器节点添加进拓扑图组件的数据容器中
server.setName('server');//设置名称 只添加了这一句
server.setPosition(300, 200);//设置服务器节点的位置
server.setImage('images/server.png');//设置服务器节点的显示图片

结果如下:

 

 我们会发现,拓扑图中的服务器节点以及客户端节点底部也多了 setName 设置的名称!如果不想要在节点下面显示字的话,可以直接设置节点 style 属性:

server.s({//s 为 setStyle 的缩写,设置样式
    'label': ''// 将 label 属性设置为空
});

这样就不显示啦!但是为什么这样设置可以呢?我们来看看 label 属性的定义,label 属性即为 GraphView.getLabel 函数的封装:

getLabel: function (data) {
    var label = data.getStyle('label');//获取样式属性 label 的值
    return label === undefined ? data.getName() : label;        
}

通过以上代码可知,style 上的 label 属性优先级高于 name 属性,可重载 GraphView.getLabel 函数改变文字获取逻辑。所以就算我们设置了 name 属性,但是再设置 label 属性还是能将 name 属性设置的值给覆盖掉的,而树组件上获取的只是节点的 name,所以两者并不冲突。

突然感觉树上的节点显示图标为什么都一样。。。改图标!

treeView 树组件通过 getIcon(data) 返回 data 对象对应的 icon 图标,可重载自定义,默认返回的都是图元原始的图标,这里我们要自定义这个函数,针对不同的节点返回不同的 icon,前面我们设置的 name 属性派上用场了:

treeView.getIcon = function(data){
    var self = this,
          edge_icon = data.getIcon();//获取对象的 icon
    if(data.getName() === 'server'){//如果是 name 为 server 的节点时
        return 'images/server.png';
    }else if(data.getName() === 'client'){//如果是 name 为 client 的节点时
        return 'images/node.png';
    }else if(data instanceof ht.Edge){//如果是 ht.Edge 类型的节点时
        return edge_icon
    }
}

选中树上的节点,拓扑图中的对应节点也会被选中,反过来,选中拓扑图中的节点,树上的节点也会被选中。

最终结果如下:

次回,我们将在场景中添加工具条!请持续跟踪哦~

 

目录
相关文章
|
21天前
|
机器学习/深度学习 编解码 自动驾驶
RT-DETR改进策略【模型轻量化】| 替换骨干网络为MoblieNetV1,用于移动视觉应用的高效卷积神经网络
RT-DETR改进策略【模型轻量化】| 替换骨干网络为MoblieNetV1,用于移动视觉应用的高效卷积神经网络
37 3
RT-DETR改进策略【模型轻量化】| 替换骨干网络为MoblieNetV1,用于移动视觉应用的高效卷积神经网络
|
25天前
|
机器学习/深度学习 编解码 自动驾驶
YOLOv11改进策略【模型轻量化】| 替换骨干网络为MoblieNetV1,用于移动视觉应用的高效卷积神经网络
YOLOv11改进策略【模型轻量化】| 替换骨干网络为MoblieNetV1,用于移动视觉应用的高效卷积神经网络
64 16
YOLOv11改进策略【模型轻量化】| 替换骨干网络为MoblieNetV1,用于移动视觉应用的高效卷积神经网络
|
15天前
|
机器学习/深度学习 数据采集 运维
机器学习在网络流量预测中的应用:运维人员的智慧水晶球?
机器学习在网络流量预测中的应用:运维人员的智慧水晶球?
58 19
|
4天前
|
机器学习/深度学习 数据可视化 API
DeepSeek生成对抗网络(GAN)的训练与应用
生成对抗网络(GANs)是深度学习的重要技术,能生成逼真的图像、音频和文本数据。通过生成器和判别器的对抗训练,GANs实现高质量数据生成。DeepSeek提供强大工具和API,简化GAN的训练与应用。本文介绍如何使用DeepSeek构建、训练GAN,并通过代码示例帮助掌握相关技巧,涵盖模型定义、训练过程及图像生成等环节。
|
13天前
|
网络协议 安全 网络安全
应用程序中的网络协议:原理、应用与挑战
网络协议是应用程序实现流畅运行和安全通信的基石。了解不同协议的特点和应用场景,以及它们面临的挑战和应对策略,对于开发者和用户都具有重要意义。在未来,随着技术的不断发展,网络协议也将不断优化和创新,为数字世界的发展提供更强大的支持。
|
2月前
|
负载均衡 容灾 Cloud Native
云原生应用网关进阶:阿里云网络ALB Ingress 全能增强
在过去半年,ALB Ingress Controller推出了多项高级特性,包括支持AScript自定义脚本、慢启动、连接优雅中断等功能,增强了产品的灵活性和用户体验。此外,还推出了ingress2Albconfig工具,方便用户从Nginx Ingress迁移到ALB Ingress,以及通过Webhook服务实现更智能的配置校验,减少错误配置带来的影响。在容灾部署方面,支持了多集群网关,提高了系统的高可用性和容灾能力。这些改进旨在为用户提供更强大、更安全的云原生网关解决方案。
698 21
|
2月前
|
容灾 网络协议 数据库
云卓越架构:云上网络稳定性建设和应用稳定性治理最佳实践
本文介绍了云上网络稳定性体系建设的关键内容,包括面向失败的架构设计、可观测性与应急恢复、客户案例及阿里巴巴的核心电商架构演进。首先强调了网络稳定性的挑战及其应对策略,如责任共担模型和冗余设计。接着详细探讨了多可用区部署、弹性架构规划及跨地域容灾设计的最佳实践,特别是阿里云的产品和技术如何助力实现高可用性和快速故障恢复。最后通过具体案例展示了秒级故障转移的效果,以及同城多活架构下的实际应用。这些措施共同确保了业务在面对网络故障时的持续稳定运行。
|
3月前
|
数据采集 JavaScript 前端开发
异步请求在TypeScript网络爬虫中的应用
异步请求在TypeScript网络爬虫中的应用
|
3月前
|
JSON Dart 前端开发
鸿蒙应用开发从入门到入行 - 篇7:http网络请求
在本篇文章里,您将掌握鸿蒙开发工具DevEco的基本使用、ArkUI里的基础组件,并通过制作一个简单界面掌握使用
100 8
|
3月前
|
移动开发 前端开发 Java

热门文章

最新文章