JS绘制拓扑图示例 (JTopo)

本文介绍了在JavaScript前端项目中利用JTopo库创建拓扑图的过程。首先,简述了<canvas>标签的作用,然后详细说明了如何加载场景、定义Node和Link属性,以及生成节点连接。在实践中遇到给canvas设置属性导致的问题,建议通过对象的.height/width属性设置尺寸,以避免图像失真和拖动问题。
摘要由CSDN通过智能技术生成

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

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

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

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

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

首先加载场景:

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

编写两个函数,用来定义Node

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值