JS绘制拓扑图示例 （JTopo）

目前在做的项目是渔政的监控，需要用到的设备包括雷达，光电，站点信息等，想要更直观的展现设备之间的连接关系和状态信息，这时候需要画一张拓扑图

在做拓扑图之前，首先要学习一下，html里面另一个比较常用的标签--<Canvas>

 <canvas> 标签定义图形，通过脚本 (通常是JavaScript)来完成，意思即，canvas只是提供一个容器，元素本身是没有绘图能力的，真正形成图形，还是需要通过脚本语言去绘制

知道了这个标签的含义及用法之后，开始网络拓扑图的绘制

首先找到一个开源且免费的拓扑图形包，Jtopo，前面我写了一个JTopo的使用心得，里面写了两个示例，基本上就可以完成这次拓扑图的设计，我将步骤拆分一下：

首先加载场景：

?
1
2
3
var canvas = document.getElementById('canvas');
       var stage = new JTopo.Stage(canvas);
       var scene = new JTopo.Scene();　　

编写两个函数，用来定义Node和Link的属性，传入参数即可生成节点：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//定义生成节点函数
       function node(x, y, img,name,height,width){
           var node = new JTopo.Node(name);
           node.setImage('img/control/' + img, true);
           node.setLocation(x, y);
           node.setSize(height,width);
           scene.add(node);
 
           return node;
       }
 
       //定义连线函数
       function linkNode(nodeA, nodeZ,color){
           var link = new JTopo.FoldLink(nodeA, nodeZ);
           link.lineWidth = 3;
           link.strokeColor = color;
           scene.add(link);
           return link;
       }

然后根据需求生成节点连接即可，效果如下图所示：

　

完整代码如下：

 

2017.9.19日更新：

我写页面一般是用JS写，CSS渲染,在JSP页面中加载，使用过程中发现一个问题，就是给canvas设置属性时，无论是通过CSS渲染还是直接通过style属性添加，JTopo都会出现bug，图像失真且无法拖动，所以建议如果通过JS来编写页面的前端同事，直接通过对象.height/width属性来添加，末尾也无需添加"px“字符串

 

posted @   StephenCurry  阅读(8946)  评论(2)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
点击右上角即可分享
微信分享提示
SQL AI 助手