前端关系图谱插件_一种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前端拓扑图插件实现系统，包括，

画布创建模块：创建拓扑图画布；

节点绘制模块：在拓扑图画布上绘制节点；

链路绘制模块：采用贝塞尔曲线，绘制节点间多条链路；并采用定时器技术实现链路的动态效果；

封装模块：对绘制好的拓扑图画布进行封装。

一种存储一个或多个程序的计算机可读存储介质，所述一个或多个程序包括指令，所述指令当由计算设备执行时，使得所述计算设备web前端拓扑图插件实现方法。

一种计算设备，包括一个或多个处理器、存储器以及一个或多个程序，其中一个或多个程序存储在所述存储器中并被配置为由所述一个或多个处理器执行，所述一个或多个程序包括用于执行web前端拓扑图插件实现方法的指令。

本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。

本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和／或方框图来描述的。应理解可由计算机程序指令实现流程图和／或方框图中的每一流程和／或方框、以及流程图和／或方框图中的流程和／或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能的步骤。

以上仅为本发明的实施例而已，并不用于限制本发明，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均包含在申请待批的本发明的权利要求范围之内。