热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

利用HTML5Canvas高效构建电信网络拓扑图

电信网络拓扑图在实际应用中具有很高的实用价值。本文介绍了一个基于HTML5Canvas的电信网络拓扑图项目,不仅实现了基本的图形展示功能,还加入了自动布局和属性栏功能,使项目更加完善。此Demo经过细微调整即可直接应用于实际项目中。

引言


电信网络拓扑图在通信领域有着广泛的应用,能够直观地展示网络结构和节点之间的连接关系。近期,我参与了一个基于HTML5 Canvas的电信网络拓扑图项目,除了基本的图形展示功能外,还增加了自动布局和属性栏功能,使得整个项目更加实用和完整。本文将详细介绍该项目的实现过程,希望能够为读者提供一些参考和帮助。


项目效果


图片描述


拓扑图布局


项目界面主要分为三部分:左侧的拓扑图(graphView),右上角的属性栏(propertyView),以及右下角的表格(tableView)。以下是具体的布局代码:


var gv = new ht.graph.GraphView();
var tablePane = new ht.widget.TablePane(gv.dm());
var propertyView = new ht.widget.PropertyView(gv.dm());

var rightView = new ht.widget.SplitView(propertyView, tablePane, 'v', 0.4);
rightView.getView().style.borderLeft = '1px solid #000';

var borderPane = new ht.widget.BorderPane();
borderPane.setRightView(rightView, 400);
borderPane.setCenterView(gv);
borderPane.addToDOM();

上述代码中,ht.widget.SplitView用于垂直分割属性栏和表格,ht.widget.BorderPane用于整体布局。最后,通过addToDOM()方法将布局添加到页面中。


节点初始化


为了展示不同的节点及其属性,我们在拓扑图中添加了多个节点,并设置了不同的属性。以下是节点初始化的代码:


function initModel() {
var name = "设备";
var count = 0;
var root = createNode(name + count++, name + (++count));
root.setImage('./symbols/机房/服务器.json');
root.setName('服务器');
root.s('label.position', 3);
gv.sm().ss(root);

for (var i = 0; i <2; i++) {
var iNode = createNode(name + count++, name + (++count));
createEdge(root, iNode);
for (var j = 0; j <2; j++) {
var jNode = createNode(name + count++, name + (++count));
createEdge(iNode, jNode);
}
}
}

createNode函数用于创建节点,并设置其属性和图像。每个节点还关联了属性面板和表格面板,以便于动态显示和修改节点属性。


属性面板


属性面板用于显示和编辑节点的各种属性。以下是创建属性面板的代码:


function createProperty() {
propertyView.addProperties([
{ name: 'name', displayName: '名称' },
{ name: 'hidden', displayName: '隐藏这个节点', accessType: 'attr', valueType: 'boolean', 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方法用于自定义属性值的渲染方式,通过弹出对话框选择属性值并更新节点属性。


自动布局


自动布局功能可以根据节点和连线的关系,自动调整节点的位置,使得拓扑图更加清晰。以下是实现自动布局的代码:


var autoLayout = new ht.layout.AutoLayout(gv);
setTimeout(function() {
layout('towardsouth', true);
}, 200);

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); }, toolTip: '朝南布局' } }
// ... 其他布局按钮
], [0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1]);
return form;
}

通过点击不同的布局按钮,可以实现多种布局方式,如朝南布局、朝北布局等。这些布局方式能够有效地提高拓扑图的可读性和美观性。


以上就是基于HTML5 Canvas构建电信网络拓扑图项目的详细实现过程。希望本文能对您有所启发和帮助。如果有任何疑问或建议,欢迎留言交流。


推荐阅读
  • 请看|差别_Android 6.0 运行时权限处理解析
    请看|差别_Android 6.0 运行时权限处理解析 ... [详细]
  • 2023年京东Android面试真题解析与经验分享
    本文由一位拥有6年Android开发经验的工程师撰写,详细解析了京东面试中常见的技术问题。涵盖引用传递、Handler机制、ListView优化、多线程控制及ANR处理等核心知识点。 ... [详细]
  • 本文详细介绍了 Flink 和 YARN 的交互机制。YARN 是 Hadoop 生态系统中的资源管理组件,类似于 Spark on YARN 的配置方式。我们将基于官方文档,深入探讨如何在 YARN 上部署和运行 Flink 任务。 ... [详细]
  • 本文介绍如何利用QFileSystemModel进行目录的浏览、创建及删除操作,并提供了一个简单的对话框界面实现。 ... [详细]
  • RecyclerView初步学习(一)
    RecyclerView初步学习(一)ReCyclerView提供了一种插件式的编程模式,除了提供ViewHolder缓存模式,还可以自定义动画,分割符,布局样式,相比于传统的ListVi ... [详细]
  • 帝国CMS多图上传插件详解及使用指南
    本文介绍了一款用于帝国CMS的多图上传插件,该插件通过Flash技术实现批量图片上传功能,显著提升了多图上传效率。文章详细说明了插件的安装、配置和使用方法。 ... [详细]
  • 本教程涵盖OpenGL基础操作及直线光栅化技术,包括点的绘制、简单图形绘制、直线绘制以及DDA和中点画线算法。通过逐步实践,帮助读者掌握OpenGL的基本使用方法。 ... [详细]
  • 本文详细介绍了中央电视台电影频道的节目预告,并通过专业工具分析了其加载方式,确保用户能够获取最准确的电视节目信息。 ... [详细]
  • 深入了解 Windows 窗体中的 SplitContainer 控件
    SplitContainer 控件是 Windows 窗体中的一种复合控件,由两个可调整大小的面板和一个可移动的拆分条组成。本文将详细介绍其功能、属性以及如何通过编程方式创建复杂的用户界面。 ... [详细]
  • 本文详细介绍了Linux系统中init进程的作用及其启动过程,解释了运行级别的概念,并提供了调整服务启动顺序的具体步骤和实例。通过了解这些内容,用户可以更好地管理系统的启动流程和服务配置。 ... [详细]
  • dotnet 通过 Elmish.WPF 使用 F# 编写 WPF 应用
    本文来安利大家一个有趣而且强大的库,通过F#和C#混合编程编写WPF应用,可以在WPF中使用到F#强大的数据处理能力在GitHub上完全开源Elmis ... [详细]
  • 作为一名专业的Web前端工程师,掌握HTML和CSS的命名规范是至关重要的。良好的命名习惯不仅有助于提高代码的可读性和维护性,还能促进团队协作。本文将详细介绍Web前端开发中常用的HTML和CSS命名规范,并提供实用的建议。 ... [详细]
  • 网易严选Java开发面试:MySQL索引深度解析
    本文详细记录了网易严选Java开发岗位的面试经验,特别针对MySQL索引相关的技术问题进行了深入探讨。通过本文,读者可以了解面试官常问的索引问题及其背后的原理。 ... [详细]
  • 在进行Revit插件开发时,经常会遇到窗口被其他应用程序遮挡的问题。本文将介绍如何通过简单的代码调整,确保插件窗口始终保持在Revit主界面的最前端,提升用户体验。 ... [详细]
  • 本文深入探讨了HTTP请求和响应对象的使用,详细介绍了如何通过响应对象向客户端发送数据、处理中文乱码问题以及常见的HTTP状态码。此外,还涵盖了文件下载、请求重定向、请求转发等高级功能。 ... [详细]
author-avatar
zhangsheng7_215
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有