CN111158681A - 一种Web前端拓扑图插件实现方法及系统 - Google Patents
一种Web前端拓扑图插件实现方法及系统 Download PDFInfo
- Publication number
- CN111158681A CN111158681A CN201911375777.5A CN201911375777A CN111158681A CN 111158681 A CN111158681 A CN 111158681A CN 201911375777 A CN201911375777 A CN 201911375777A CN 111158681 A CN111158681 A CN 111158681A
- Authority
- CN
- China
- Prior art keywords
- canvas
- topological graph
- nodes
- plug
- web front
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 36
- 230000000694 effects Effects 0.000 claims abstract description 21
- 238000010586 diagram Methods 0.000 claims abstract description 19
- 238000005516 engineering process Methods 0.000 claims abstract description 12
- 238000004806 packaging method and process Methods 0.000 claims abstract description 10
- 230000008859 change Effects 0.000 claims description 12
- 230000001965 increasing effect Effects 0.000 claims description 5
- 230000008569 process Effects 0.000 claims description 4
- 238000012858 packaging process Methods 0.000 claims description 3
- 239000000203 mixture Substances 0.000 claims 2
- 239000002994 raw material Substances 0.000 claims 2
- 230000005540 biological transmission Effects 0.000 abstract description 5
- 238000011161 development Methods 0.000 abstract description 3
- 230000002708 enhancing effect Effects 0.000 abstract description 3
- 230000006870 function Effects 0.000 description 9
- 238000004590 computer program Methods 0.000 description 7
- 238000012545 processing Methods 0.000 description 4
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000004891 communication Methods 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 239000004744 fabric Substances 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Processing Or Creating Images (AREA)
Abstract
本发明公开了一种Web前端拓扑图插件实现方法，包括创建拓扑图画布；在拓扑图画布上绘制节点；采用贝塞尔曲线，绘制节点间多条链路，并采用定时器技术实现链路的动态效果；对绘制好的拓扑图画布进行封装。同时公开了相应的系统。本发明实现的拓扑图插件不仅支持节点间的多条链路，并且链路有动态传输效果，有效增强了网页开发中更为复杂的拓扑图数据展示。
Description
技术领域
本发明涉及一种Web前端拓扑图插件实现方法及系统，属于Web前端技术领域。
背景技术
拓扑图是指由网络节点设备和通信介质构成的网络结构图。拓扑图插件则是使用JavaScript语言编写的，应用于web界面，用来展示设备间复杂的关系。现有的拓扑图插件功能存在以下缺点：节点与节点之间只支持一条链路，不支持多条链路；链路是静态的，没有动态的网页效果。
发明内容
本发明提供了一种Web前端拓扑图插件实现方法及系统，解决了背景技术中披露的问题。
为了解决上述技术问题，本发明所采用的技术方案是：
一种Web前端拓扑图插件实现方法，包括，
创建拓扑图画布；
在拓扑图画布上绘制节点；
采用贝塞尔曲线，绘制节点间多条链路，并采用定时器技术实现链路的动态效果；
对绘制好的拓扑图画布进行封装。
采用Canvas元素创建拓扑图画布。
对接收的节点数据进行分类，将同一类型的节点排布在拓扑图画布的同一区域，在该区域绘制存放节点位置的矩形。
采用fillRect方法绘制存放节点位置的矩形，采用drawImage方法将矩形填充上不同的图片。
通过改变二次贝塞尔曲线的控制点坐标，绘制节点间多条链路。
采用定时器技术实现链路动态效果的过程为，
将贝塞尔曲线方程分解为横坐标关于时间变化的方程和纵坐标关于时间变化的方程；
采用定时器，每隔若干时刻增加一次时间值；
将时间值带入横坐标关于时间变化的方程和纵坐标关于时间变化的方程，得到不同时间值的运动点坐标，实现链路动态效果。
当运动点坐标与曲线终点坐标重合时，将时间值归零，让点重新回到起点开始运动。
封装过程为，代码最外层用封闭函数包裹，代码主体用构造函数包裹，构造函数暴露给外部。
一种Web前端拓扑图插件实现系统，包括，
画布创建模块：创建拓扑图画布；
节点绘制模块：在拓扑图画布上绘制节点；
链路绘制模块：采用贝塞尔曲线，绘制节点间多条链路；并采用定时器技术实现链路的动态效果；
封装模块：对绘制好的拓扑图画布进行封装。
一种存储一个或多个程序的计算机可读存储介质，所述一个或多个程序包括指令，所述指令当由计算设备执行时，使得所述计算设备执行Web前端拓扑图插件实现方法。
本发明所达到的有益效果：本发明实现的拓扑图插件不仅支持节点间的多条链路，并且链路有动态传输效果，有效增强了网页开发中更为复杂的拓扑图数据展示。
附图说明
图1为本发明方法的流程图；
图2为实现链路动态效果的流程图。
具体实施方式
下面结合附图对本发明作进一步描述。以下实施例仅用于更加清楚地说明本发明的技术方案，而不能以此来限制本发明的保护范围。
如图1所示，一种Web前端拓扑图插件实现方法，包括以下步骤：
步骤1，创建拓扑图画布。
Canvas是HTML5支持的一种新元素，采用Canvas元素创建拓扑图画布，画布是一个矩形区域，使用JavaScript方法能控制画布上的每一个像素，如画布的宽和高。
步骤2，在拓扑图画布上绘制节点。
对接收的节点数据进行分类，将同一类型的节点排布在拓扑图画布的同一区域，采用fillRect方法在该区域绘制存放节点位置的矩形，采用drawImage方法将矩形填充上不同的图片，以此来区分不同类型的节点。
例如：接收的节点数据包括主机、代理、介质及它们之间关系的数据，将表示主机的节点依次排列置于画布左侧，将表示代理的节点依次排列置于画布中间位置，将表示介质的节点依次排列置于画布右侧，采用fillRect方法制存放节点位置的矩形。
步骤3，采用贝塞尔曲线，通过lineTo方法绘制节点间多条链路，并采用定时器技术实现链路的动态效果。
贝塞尔曲线是应用于二维图形的曲线，曲线由顶点和控制点组成，通过改变控制点坐标可以改变曲线的形状，贝塞尔曲线一共有三种，一次贝塞尔曲线没有控制点，描述的是一条线段；二次贝塞尔曲线有一个控制点，描述的是一条抛物线；三次贝塞尔曲线有两个控制点，描述的则是类似抛物线的圆滑曲线。这里使用的是二次贝塞尔曲线，即通过改变二次贝塞尔曲线的控制点坐标，绘制节点间多条链路。
将有任务传输的主机和代理用连接线连接；同理将有任务传输的代理和介质用连接线连接，此时的链路由于都是直线，因此看不出多条链路的效果，因此使用二次贝塞尔曲线，改变控制点的坐标使曲线弯曲，并使它们不重叠，实现多条连接线的效果。
如图2所示，采用定时器技术实现链路动态效果的过程如下：
S1）将贝塞尔曲线方程分解为横坐标关于时间变化的方程和纵坐标关于时间变化的方程；
X=Math.pow(1-t,2)*start[x]+2*t*(1-t)*radian[x]+Math.pow(t,2)*end[x]；
Y=Math.pow(1-t,2)*start[y]+2*t*(1-t)*radian[y]+Math.pow(t,2)*end[y]；
其中，Math.pow()求方函数，start[x]表示曲线起点横坐标；start[y]表示曲线起点纵坐标；end[x]表示曲线终点横坐标；end[y]表示曲线终点纵坐标；radian[x]表示曲线控制点横坐标；radian[y]表示曲线控制点纵坐标。
起点和终点坐标是根据节点确定的，控制点坐标是根据当前曲线是第几条确定的，所以改变t的值，就能获得运动点的横纵坐标。
S2）采用定时器，每隔若干时刻增加一次时间值。
t等于0时，运动点与起点坐标重合；t等于0.5时，运动点位于曲线的中间位置；t等于1时，运动点与终点坐标重合，t的值每次增加0.01，增加100次之后，将t的值重新赋值为0，即当运动点坐标与曲线终点坐标重合时，将时间值归零，让点重新回到起点开始运动，以此达到点在曲线上往返运动的效果。
S3）将时间值带入横坐标关于时间变化的方程和纵坐标关于时间变化的方程，得到不同时间值的运动点坐标，并渲染到页面上，实现链路动态效果。
步骤4，使用JavaScript闭包技术对绘制好的拓扑图画布进行封装。
封装过程为：
1、代码最外层用封闭函数包裹；一是防止本发明插件和其他插件起冲突；二是变量只在封闭函数内起作用，防止变量污染。
2、代码主体用构造函数包裹，将定时器刷新速率，节点所占宽高等参数设置成构造函数的属性。
3、构造函数暴露给外部；以便全局调用，调用插件时可配置速率，节点宽高等属性值。
上述方法实现的拓扑图插件不仅支持节点间的多条链路，并且链路有动态传输效果，有效增强了网页开发中更为复杂的拓扑图数据展示。
一种Web前端拓扑图插件实现系统，包括，
画布创建模块：创建拓扑图画布；
节点绘制模块：在拓扑图画布上绘制节点；
链路绘制模块：采用贝塞尔曲线，绘制节点间多条链路；并采用定时器技术实现链路的动态效果；
封装模块：对绘制好的拓扑图画布进行封装。
一种存储一个或多个程序的计算机可读存储介质，所述一个或多个程序包括指令，所述指令当由计算设备执行时，使得所述计算设备Web前端拓扑图插件实现方法。
一种计算设备，包括一个或多个处理器、存储器以及一个或多个程序，其中一个或多个程序存储在所述存储器中并被配置为由所述一个或多个处理器执行，所述一个或多个程序包括用于执行Web前端拓扑图插件实现方法的指令。
本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质（包括但不限于磁盘存储器、CD-ROM、光学存储器等）上实施的计算机程序产品的形式。
本申请是参照根据本申请实施例的方法、设备（系统）、和计算机程序产品的流程图和／或方框图来描述的。应理解可由计算机程序指令实现流程图和／或方框图中的每一流程和／或方框、以及流程图和／或方框图中的流程和／或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能的步骤。
以上仅为本发明的实施例而已，并不用于限制本发明，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均包含在申请待批的本发明的权利要求范围之内。
Claims (10)
1.一种Web前端拓扑图插件实现方法，其特征在于：包括，
创建拓扑图画布；
在拓扑图画布上绘制节点；
采用贝塞尔曲线，绘制节点间多条链路，并采用定时器技术实现链路的动态效果；
对绘制好的拓扑图画布进行封装。
2.根据权利要求1所述的一种Web前端拓扑图插件实现方法，其特征在于：采用Canvas元素创建拓扑图画布。
3.根据权利要求1所述的一种Web前端拓扑图插件实现方法，其特征在于：对接收的节点数据进行分类，将同一类型的节点排布在拓扑图画布的同一区域，在该区域绘制存放节点位置的矩形。
4.根据权利要求3所述的一种Web前端拓扑图插件实现方法，其特征在于：采用fillRect方法绘制存放节点位置的矩形，采用drawImage方法将矩形填充上不同的图片。
5.根据权利要求1所述的一种Web前端拓扑图插件实现方法，其特征在于：通过改变二次贝塞尔曲线的控制点坐标，绘制节点间多条链路。
6.根据权利要求1所述的一种Web前端拓扑图插件实现方法，其特征在于：采用定时器技术实现链路动态效果的过程为，
将贝塞尔曲线方程分解为横坐标关于时间变化的方程和纵坐标关于时间变化的方程；
采用定时器，每隔若干时刻增加一次时间值；
将时间值代入横坐标关于时间变化的方程和纵坐标关于时间变化的方程，得到不同时间值的运动点坐标，实现链路动态效果。
7.根据权利要求6所述的一种Web前端拓扑图插件实现方法，其特征在于：当运动点坐标与曲线终点坐标重合时，将时间值归零，让点重新回到起点开始运动。
8.根据权利要求1所述的一种Web前端拓扑图插件实现方法，其特征在于：封装过程为，代码最外层用封闭函数包裹，代码主体用构造函数包裹，构造函数暴露给外部。
9.一种Web前端拓扑图插件实现系统，其特征在于：包括，
画布创建模块：创建拓扑图画布；
节点绘制模块：在拓扑图画布上绘制节点；
链路绘制模块：采用贝塞尔曲线，绘制节点间多条链路；并采用定时器技术实现链路的动态效果；
封装模块：对绘制好的拓扑图画布进行封装。
10.一种存储一个或多个程序的计算机可读存储介质，其特征在于：所述一个或多个程序包括指令，所述指令当由计算设备执行时，使得所述计算设备执行根据权利要求1至8所述的方法中的任一方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911375777.5A CN111158681B (zh) | 2019-12-27 | 2019-12-27 | 一种Web前端拓扑图插件实现方法及系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911375777.5A CN111158681B (zh) | 2019-12-27 | 2019-12-27 | 一种Web前端拓扑图插件实现方法及系统 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111158681A true CN111158681A (zh) | 2020-05-15 |
| CN111158681B CN111158681B (zh) | 2022-09-06 |
Family
ID=70558424
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201911375777.5A Active CN111158681B (zh) | 2019-12-27 | 2019-12-27 | 一种Web前端拓扑图插件实现方法及系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111158681B (zh) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113012260A (zh) * | 2021-02-09 | 2021-06-22 | 福建天泉教育科技有限公司 | 一种在Canvas下交叉区域擦除的方法与终端 |
| CN114944991A (zh) * | 2022-05-30 | 2022-08-26 | 济南浪潮数据技术有限公司 | 一种基于web端的拓扑图编辑方法、系统及工具 |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101751383A (zh) * | 2009-12-30 | 2010-06-23 | 北京天融信科技有限公司 | 一种使用svg描述网络拓扑的方法 |
| CN103873277A (zh) * | 2012-12-12 | 2014-06-18 | 中国科学院声学研究所 | 一种分层的网络拓扑可视化方法及系统 |
| CN104767654A (zh) * | 2015-02-28 | 2015-07-08 | 山东中创软件商用中间件股份有限公司 | 监控系统拓扑图的更新方法及装置 |
| WO2019000340A1 (zh) * | 2017-06-29 | 2019-01-03 | 华为技术有限公司 | 网络拓扑结构映射方法及装置、终端、存储介质 |
| CN110363828A (zh) * | 2019-06-18 | 2019-10-22 | 深圳壹账通智能科技有限公司 | 一种绘制流程图的方法及绘制流程图的设备 |
-
2019
- 2019-12-27 CN CN201911375777.5A patent/CN111158681B/zh active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101751383A (zh) * | 2009-12-30 | 2010-06-23 | 北京天融信科技有限公司 | 一种使用svg描述网络拓扑的方法 |
| CN103873277A (zh) * | 2012-12-12 | 2014-06-18 | 中国科学院声学研究所 | 一种分层的网络拓扑可视化方法及系统 |
| CN104767654A (zh) * | 2015-02-28 | 2015-07-08 | 山东中创软件商用中间件股份有限公司 | 监控系统拓扑图的更新方法及装置 |
| WO2019000340A1 (zh) * | 2017-06-29 | 2019-01-03 | 华为技术有限公司 | 网络拓扑结构映射方法及装置、终端、存储介质 |
| CN110363828A (zh) * | 2019-06-18 | 2019-10-22 | 深圳壹账通智能科技有限公司 | 一种绘制流程图的方法及绘制流程图的设备 |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113012260A (zh) * | 2021-02-09 | 2021-06-22 | 福建天泉教育科技有限公司 | 一种在Canvas下交叉区域擦除的方法与终端 |
| CN113012260B (zh) * | 2021-02-09 | 2023-04-28 | 福建天泉教育科技有限公司 | 一种在Canvas下交叉区域擦除的方法与终端 |
| CN114944991A (zh) * | 2022-05-30 | 2022-08-26 | 济南浪潮数据技术有限公司 | 一种基于web端的拓扑图编辑方法、系统及工具 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111158681B (zh) | 2022-09-06 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111158681B (zh) | 一种Web前端拓扑图插件实现方法及系统 | |
| CN102902848B (zh) | 针对边界元分析的三维可视化仿真方法 | |
| CN107292945B (zh) | 视频图像的图层渲染处理方法及其系统 | |
| CN110738722B (zh) | 一种热力图纹理的生成方法、装置及设备 | |
| CN105786301B (zh) | 多窗口系统下切换显示对象的方法及其装置 | |
| CN110032614A (zh) | 基于wasm的地图矢量渲染方法和装置 | |
| CN107423366B (zh) | 一种轮播图切换方法及装置 | |
| CN113409411B (zh) | 图形界面的渲染方法、装置、电子设备及存储介质 | |
| CN109118593A (zh) | 一种创建三维模型可编辑组态的系统和方法 | |
| CN111275810A (zh) | 基于图像处理的k近邻点云滤波方法、装置和存储介质 | |
| CN107193541A (zh) | 任务执行进度的显示方法及装置 | |
| US20160111129A1 (en) | Image edits propagation to underlying video sequence via dense motion fields | |
| CN108734788A (zh) | 一种3d对象在虚拟场景中的节点化组织方法 | |
| CN111158840B (zh) | 图像轮播方法及装置 | |
| CN110007915A (zh) | 一种自适应子控件的线性布局方法及装置 | |
| CN114202642A (zh) | 三维三角网模型中超大空洞的填补方法及设备 | |
| CN110362298B (zh) | 一种基于浏览器的目标对象绘制方法、装置和浏览器 | |
| CN111598988B (zh) | 一种基于d3的知识图谱数据节点渲染方法及系统 | |
| CN104238892A (zh) | 一种信息处理方法及电子设备 | |
| CN110018812A (zh) | 一种图形绘制方法和装置 | |
| CN104484404B (zh) | 一种改善分布式文件系统中地理栅格数据文件处理方法 | |
| CN109408656B (zh) | 基于MapGIS的地球化学调查矢量数据自动化处理方法及系统 | |
| CN112560403A (zh) | 文本的处理方法及装置、电子设备 | |
| CN107102832A (zh) | 图表中图形的显示方法及装置 | |
| CN109658495A (zh) | 环境光遮蔽效果的渲染方法、装置及电子设备 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| TA01 | Transfer of patent application right | ||
| TA01 | Transfer of patent application right |
Effective date of registration: 20220520 Address after: 210000 floor 8, building 1, No. 2, Yongshun Road, high tech park, Qinhuai District (Baixia), Nanjing, Jiangsu Province Applicant after: NANJING UNARY INFORMATION TECHNOLOGY Co.,Ltd. Address before: 210000 9-10 / F, building 1, Changfeng building, No.14 Xinghuo Road, Jiangbei new district, Nanjing City, Jiangsu Province Applicant before: Aerospace one system (Nanjing) data Technology Co.,Ltd. |
|
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| CP03 | Change of name, title or address | ||
| CP03 | Change of name, title or address |
Address after: Building 1, 6th Floor, Changfeng Building, No.14 Xinghuo Road, Research and Innovation Park, Jiangbei New District, Nanjing City, Jiangsu Province, 210000 Patentee after: Aerospace One System (Jiangsu) Information Technology Co.,Ltd. Address before: 210000 floor 8, building 1, No. 2, Yongshun Road, high tech park, Qinhuai District (Baixia), Nanjing, Jiangsu Province Patentee before: NANJING UNARY INFORMATION TECHNOLOGY Co.,Ltd. |