前端关系图谱插件_一种Web前端拓扑图插件实现方法及系统与流程

本发明涉及一种web前端拓扑图插件实现方法及系统，属于web前端技术领域。

背景技术：

拓扑图是指由网络节点设备和通信介质构成的网络结构图。拓扑图插件则是使用javascript语言编写的，应用于web界面，用来展示设备间复杂的关系。现有的拓扑图插件功能存在以下缺点：节点与节点之间只支持一条链路，不支持多条链路；链路是静态的，没有动态的网页效果。

技术实现要素：

本发明提供了一种web前端拓扑图插件实现方法及系统，解决了背景技术中披露的问题。

为了解决上述技术问题，本发明所采用的技术方案是：

一种web前端拓扑图插件实现方法，包括，

创建拓扑图画布；

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

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

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

采用canvas元素创建拓扑图画布。

对接收的节点数据进行分类，将同一类型的节点排布在拓扑图画布的同一区域，在该区域绘制存放节点位置的矩形。

采用fillrect方法绘制存放节点位置的矩形，采用drawimage方法将矩形填充上不同的图片。

通过改变二次贝塞尔曲线的控制点坐标，绘制节点间多条链路。

采用定时器技术实现链路动态效果的过程为，

将贝塞尔曲线方程分解为横坐标关于时间变化的方程和纵坐标关于时间变化的方程；

采用定时器，每隔若干时刻增加一次时间值；