基于HTML5的网络拓扑图(1)
什么是网络拓扑
网络拓扑,指构成网络的成员间特定的排列方式。分为物理的,即真实的、或者逻辑的,即虚拟的两种。如果两个网络的连接结构相同,我们就説它们的网络拓扑相同,尽管它们各自内部的物理接线、节点间距离可能会有不同。 - 维基百科
网络拓扑图的绘制
很多人用visio绘制网络拓扑图,非常精美,但只能静态示意,也有些传统的拓扑图中间件,基于Java、flex或者Silverlight技术,能够动态显示,只是界面略显沉重,于是有人尝试纯Web技术的图形组件,其中有不少佼佼者如:mxgraph, yfiles...... 都是老外开发的产品,类库巨大,售价昂贵,技术支持是个问题,那么有没有一种轻巧、干净、国产的纯Web拓扑图组件呢?于是就有了Qunee - 开发清新、高效的图形组件
Qunee是一套基于HTML5的网络图组件,提供Web图形解决方案,借助Qunee,可以轻松完成 地图,拓扑图,组织图等等,官方网站:qunee.com, 在线演示:demo.qunee.com
拓扑图典型示例
以“公共事业服务中心网络拓扑图”为例,展示典型的拓扑图结构,包含了节点、连线、分组等典型元素,通过图形展示,中心网与各个分支结构之间的关系变得一目了然
拓扑图中元素类型
拓扑图中基本的图元要素有:节点,文字,连线,分组等,在这个示例中都得到了体现
创建节点
function createNode(image, x, y, name, group){
var node = graph.createNode(name, x, y);
if(image){
if(Q.isString(image)){
image = "./network/images2/" + image;
}
node.image = image;
}
if(group){
group.addChild(node);
}
return node;
}
创建文字元素
function createText(name, x, y, fontSize, color, parent){
var text = graph.createText(name, x, y);
text.setStyle(Q.Styles.LABEL_ANCHOR_POSITION, Q.Position.CENTER_MIDDLE);
text.setStyle(Q.Styles.LABEL_POSITION, Q.Position.CENTER_MIDDLE);
text.setStyle(Q.Styles.LABEL_FONT_SIZE, fontSize);
text.setStyle(Q.Styles.LABEL_COLOR, color);
if(parent){
parent.addChild(text);
}
return text;
}
创建连线元素
function createEdge(a, b, color, dashed, name){
var edge = graph.createEdge(name, a, b);
if(dashed){
edge.setStyle(Q.Styles.EDGE_LINE_DASH, [8, 5]);
}
edge.setStyle(Q.Styles.EDGE_WIDTH, 3);
edge.setStyle(Q.Styles.EDGE_COLOR, color);
edge.setStyle(Q.Styles.ARROW_TO, false);
return edge;
}
创建云状分组
function createGroup(padding){
var group = graph.createGroup();
group.groupImage = graphs.group_cloud;
group.padding = padding || 30;
return group;
}
创建虚线样式
edge.setStyle(Q.Styles.EDGE_LINE_DASH, [8, 5]);
创建Z形连线类型
edge.edgeType = Q.Consts.EDGE_TYPE_ZIGZAG;
创建弯向某个节点的曲线
function FlexEdgeUI(edge, graph){
Q.doSuperConstructor(this, FlexEdgeUI, arguments);
}
FlexEdgeUI.prototype = {
drawEdge: function(path, fromUI, toUI, edgeType, fromBounds, toBounds){
var from = fromBounds.center;
path.curveTo(from.x, from.y, internet.x, internet.y);
}
} Q.extend(FlexEdgeUI, Q.EdgeUI); edge.uiClass = FlexEdgeUI;
在线视频
<iframe src="http://player.youku.com/embed/XNjg5NTQ4NTE2" height="500" width="700" allowfullscreen="" frameborder="0"></iframe>
基于HTML5的网络拓扑图(1)的更多相关文章
- 基于HTML5的网络拓扑图
电信网管系统中,设备状态信息的实时展示非常重要,通常会挂载一堆图标来展示状态或告警信息,图标的信息量有限,有时需要更详细的面板,甚至以图表的形式展现,本文将结合最近客户提到的需求,使用 Qunee1. ...
- 基于Web实现网络拓扑图
想想好像好久没用写博客了! 由于最近想跳槽了(ps:尽管公司挽留,提出一些异与往常的挽留“制度”,But确实已经死心了) ,发现前一段时间一些做Hadoop,和Spark同事时常来请教网络拓扑图的有关 ...
- 快速开发基于 HTML5 网络拓扑图应用
采用 HT 开发网络拓扑图非常容易,例如<入门手册>的第一个小例子麻雀虽小五脏俱全:http://www.hightopo.com/guide/guide/core/beginners/e ...
- 快速开发基于 HTML5 网络拓扑图应用1
今天开始我们就从最基础解析如何构建 HTML5 Canvas 拓扑图应用,HT 内部封装了一个拓扑图形组件 ht.graph.GraphView(以下简称 GraphView)是 HT 框架中 2D ...
- 快速开发基于 HTML5 网络拓扑图应用--入门篇(一)
计算机网络的拓扑结构是引用拓扑学中研究与大小,形状无关的点.线关系的方法.把网络中的计算机和通信设备抽象为一个点,把传输介质抽象为一条线,由点和线组成的几何图形就是计算机网络的拓扑结构.网络的拓扑结构 ...
- 基于 HTML5 Canvas 绘制的电信网络拓扑图
电信网结构(telecommunication network structure)是指电信网各种网路单元按技术要求和经济原则进行组合配置的组合逻辑和配置形式.组合逻辑描述网路功能的体系结构,配置形式 ...
- HTML5 网络拓扑图性能优化
HTML5 中的 Canvas 对文本的渲染(fillText,strokeText)性能都不太好,比如设置字体(font).文本旋转(rotation),如果绘制较多的文本时,一些交互操作会手动很大 ...
- 矢量Chart图表嵌入HTML5网络拓扑图的应用
使用 HT for Web (以下简称 HT)开发HTML5网络拓扑图的开发者有 Chart 需求的项目的时候,感觉很痛苦,HT 集成的 Chart 组件中,并不包含有坐标,在展现方面不是很直观,但是 ...
- 快速创建 HTML5 Canvas 电信网络拓扑图
前言 属性列表想必大家都不会陌生,正常用 HTML5 来做的属性列表大概就是用下拉菜单之类的,而且很多情况下,下拉列表还不够好看,怎么办?我试着用 HT for Web 来实现属性栏点击按钮弹出多功能 ...
随机推荐
- Python第二
今日内容概要 基本运算符 流程控制 字符编码 理论特别多.结论特别少 文件处理 今日内容详细 基本运算符 1.算数运算符 x = 1 y = 5 res = x + y #加 res1 = x - y ...
- ComboBox控件绑定数据源后,添加'请选择'或'全部'
ComboBox控件绑定数据源后,添加'请选择'或'全部' 当使用ComboBox控件绑定数据源之后,通过Items 属性添加的数据是无效的,此时如果要在所有选项前添加 选项 ,则需要考虑从数据源下手 ...
- JZ-032-把数组排成最小的数
把数组排成最小的数 题目描述 输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个.例如输入数组{3,32,321},则打印出这三个数字能排成的最小数字为3213 ...
- 矩池云助力科研算力免费上"云",让 AI 教学简单起来
矩池云是一个专业的国内深度学习云平台,拥有着良好的深度学习云端训练体验,和高性价比的GPU集群资源.而且对同学们比较友好,会经常做一些大折扣的活动,最近双十一,全场所有的RTX 2070.Platin ...
- 字节一面:go的协程相比线程,轻量在哪?
1. 用户态和内核态 Linux整个体系分为用户态和内核态(或者叫用户空间和内核空间), 那内核态究竟是什么呢? 本质上我们所说的内核态, 它是一种特殊的软件程序,特殊在哪? 统筹计算机的硬件资源,例 ...
- Vue的mvvm模式
传统的MVC模式: Model:模型-->负责数据存储 View:视图-->负责页面展示 Control:控制器-->事件交互(根据视图与用户交互后改变数据) Vue的MVVM模式: ...
- Linux——vi命令详解
转载 Linux--vi命令详解 原文链接:https://blog.csdn.net/cyl101816/article/details/82026678 vi编辑器是所有Unix及Linux系 ...
- 28 面向对象编程 instanceof 代码 小结 父类引用指向子类对象
instanceof 代码 // main // Object > Person >Student Object object = new Student(); // 提取公式:XY之间是 ...
- JavaSE 千寻简学习笔记
JavaSE 千寻简学习笔记 简介 TIOBE:编程语言排行榜 官网:https://hellogithub.com/report/tiobe/ 如何高效的学习Java 多写(代码)多写(笔记)多写( ...
- BBS项目分布搭建四(点赞点踩及评论功能准备)
BBS项目分布搭建四(点赞点踩及评论功能) 1. 点赞点踩样式准备 # 在base.html文件中 head标签内 添加css模块: {% block css %} {% endblock %} # ...