一种Web前端拓扑图插件实现方法及系统技术方案

本发明专利技术公开了一种Web前端拓扑图插件实现方法，包括创建拓扑图画布；在拓扑图画布上绘制节点；采用贝塞尔曲线，绘制节点间多条链路，并采用定时器技术实现链路的动态效果；对绘制好的拓扑图画布进行封装。同时公开了相应的系统。本发明专利技术实现的拓扑图插件不仅支持节点间的多条链路，并且链路有动态传输效果，有效增强了网页开发中更为复杂的拓扑图数据展示。

【技术实现步骤摘要】
一种Web前端拓扑图插件实现方法及系统
本专利技术涉及一种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前端拓扑图插件实现系统，包括，画布创建模块：创建拓扑图画布；节点绘制模块：在拓扑图画布上绘制节点；链路绘制模块：采用贝塞尔曲线，绘制节点间多条链路；并采用定时器技术实现链路的动态效果；封装模块：对绘制好的拓扑图画布进本文档来自技高网...

【技术保护点】
1.一种Web前端拓扑图插件实现方法，其特征在于：包括，/n创建拓扑图画布；/n在拓扑图画布上绘制节点；/n采用贝塞尔曲线，绘制节点间多条链路，并采用定时器技术实现链路的动态效果；/n对绘制好的拓扑图画布进行封装。/n

【技术特征摘要】
1.一种Web前端拓扑图插件实现方法，其特征在于：包括，
创建拓扑图画布；
在拓扑图画布上绘制节点；
采用贝塞尔曲线，绘制节点间多条链路，并采用定时器技术实现链路的动态效果；
对绘制好的拓扑图画布进行封装。


2.根据权利要求1所述的一种Web前端拓扑图插件实现方法，其特征在于：采用Canvas元素创建拓扑图画布。


3.根据权利要求1所述的一种Web前端拓扑图插件实现方法，其特征在于：对接收的节点数据进行分类，将同一类型的节点排布在拓扑图画布的同一区域，在该区域绘制存放节点位置的矩形。


4.根据权利要求3所述的一种Web前端拓扑图插件实现方法，其特征在于：采用fillRect方法绘制存放节点位置的矩形，采用drawImage方法将矩形填充上不同的图片。


5.根据权利要求1所述的一种Web前端拓扑图插件实现方法，其特征在于：通过改变二次贝塞尔曲线的控制点坐标，绘制节点间多条链路。


6.根据权利要求1所述的一种Web前端拓扑图插件实现方法，其特征在于：采用定时器技术实现链路动态效果的过程为，
将贝塞尔曲线方程分解为横坐...

【专利技术属性】
技术研发人员：李正祥，马东辉，张有成，姚崎，李海鹏，
申请(专利权)人：航天壹进制南京数据科技有限公司，
类型：发明
国别省市：江苏;32