原文:基于 HTML5 Canvas 绘制的电信网络拓扑图

电信网结构 telecommunication network structure 是指电信网各种网路单元按技术要求和经济原则进行组合配置的组合逻辑和配置形式。组合逻辑描述网路功能的体系结构,配置形式描述网路单元的邻接关系,即以交换中心 或节点 和传输链路所组成的拓扑结构。常见的网络拓扑结构有星型结构 总线结构 环形结构 树形结构 网状结构 混合型拓扑以及蜂窝拓扑结构等,本文的例子主要描绘的是总线 ...

2018-02-07 06:31 1 1093 推荐指数:

查看详情

快速创建 HTML5 Canvas 电信网络拓扑图

前言 电信网络拓扑图确实实用性很强,最近有个项目是基于这个的,为了写得丰富一点,还加了自动布局已经属性栏部分,不过这个 Demo 真的写得很用心,稍微改改都能直接运用到项目中去,还可以进行数据交互,总之希望能对大家有所帮助。 效果 拓扑图 从上面的效果图中我们可以看到,整个页面分为 ...

Wed Mar 21 15:47:00 CST 2018 0 1023
电信网络拓扑图自动布局

电信网络拓扑图中,很经常需要用到自动布局的功能,在大数据的层级关系中,通过手工一个一个摆放位置是不太现实的,工作量是相当大的,那么就有了自动布局这个概念,来解放布局的双手,让网络拓扑图能够布局出一个优美的图案,当然在一些复杂的布局中,光有自动布局还是不行的,还是需要手工地做些相应的调整,才能让 ...

Mon Aug 22 09:39:00 CST 2016 1 3951
基于HTML5网络拓扑图

电信网管系统中,设备状态信息的实时展示非常重要,通常会挂载一堆图标来展示状态或告警信息,图标的信息量有限,有时需要更详细的面板,甚至以图表的形式展现,本文将结合最近客户提到的需求,使用 Qunee1.6 beta版本,实现拓扑图中设备信息的实时显示。 Qunee 中ui 的定制非常灵活,每个 ...

Sat Nov 01 01:24:00 CST 2014 0 2286
电信网络拓扑图自动布局之总线

在前面《电信网络拓扑图自动布局》一文中,我们大体介绍了 HT for Web 电信网络拓扑图自动布局的相关知识,但是都没有深入地描述各种自动布局的用法,我们今天在这边就重点介绍总线的具体实现方案。 在 HT for Web 的连线手册中,有说明可以自定义连线类型 ...

Mon Sep 05 10:43:00 CST 2016 0 1538
HTML5 网络拓扑图性能优化

HTML5 中的 Canvas 对文本的渲染(fillText,strokeText)性能都不太好,比如设置字体(font)、文本旋转(rotation),如果绘制较多的文本时,一些交互操作会手动很大的影响,操作起来没那么顺畅,体验将会极其差,这不是我们想要的结果,再进一步和图片的绘制进行比较比较 ...

Mon Jun 27 08:12:00 CST 2016 2 1524
基于 HTML5 WebGL 的 3D 网络拓扑图

  在数据量很大的2D 场景下,要找到具体的模型比较困难,并且只能显示出模型的的某一部分,显示也不够直观,这种时候能快速搭建出 3D 场景就有很大需求了。但是搭建 3D 应用场景又依赖于通过 3ds ...

Fri Jun 30 20:48:00 CST 2017 0 6816
快速开发基于 HTML5 网络拓扑图应用1

今天开始我们就从最基础解析如何构建 HTML5 Canvas 拓扑图应用,HT 内部封装了一个拓扑图形组件 ht.graph.GraphView(以下简称 GraphView)是 HT 框架中 2D 功能最丰富的组件,其相关类库都在 ht.graph 包下。GraphView 具有基本图形的呈现 ...

Mon Jan 08 14:21:00 CST 2018 1 1158
 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM