jTopo入门简单实现拓扑图

article/2025/8/15 4:37:24

最近项目中需要绘制拓扑图，于是研究了下绘制拓扑图的组件，jtopo是一款比较简单易上手的开发工具包，分享给大家。

jtopo特点

1、完全基于HTML5 Canvas开发，API平易近人、几乎简单到了极致。
2、不依赖任何其他库、执行仅需一个Canvas。
3、体积小，压缩后仅几十KB。
5、免费！

下载jtopo

大家可以去官网自行下载 http://www.jtopo.com/download/jtopo-0.4.8-min.js，目前版本是0.4.8，官网有API文档和案例。
在这里插入图片描述

jtopo官网地址：http://www.jtopo.com/

jQuery

目前我是vue项目中引入的jtopo，jtopo只支持在jQuery语言编写，需要项目中引入jQuery，不是vue项目的可以自行去官网下载jQuery.js，vue引入jQuery可参考https://blog.csdn.net/JQdazhuang/article/details/107152192

举例代码

html代码：

<template><divstyle="position: relative; width: 100%; height: 100%; margin: auto"id="topo_content"><canvas id="topology-canvas" width="1000" height="600"></canvas></div>
</template>

js代码：

var canvas = document.getElementById("topology-canvas");var stage = new JTopo.Stage(canvas);//创建一个画布var scene = new JTopo.Scene(stage);//创建一个背景_this.scene = scene;var childs = topoData;for (let i in childs) {var a = childs[i];if (a.elementType == "node") {//如果是拓扑节点//节点var node = new JTopo.Node(a.text);node.setLocation(a.x, a.y);node.setImage("/static/img/" + a.nodeImage, true);node.fontColor = "0,0,0";node.nodeId = a.nodeId;node.nodeType = a.nodeType;node.nodeImage = a.nodeImage;node.scaleX = a.scaleX;node.scaleY = a.scaleY;node.devIp = a.devIp;node.textPosition = a.textPosition;if (node) {node.alarm = a.alarm;node.alarmColor = "255,0,0";node.alarmAlpha = 0.5;}scene.add(node);} else if (a.elementType == "link") {//如果是连线var link = null;if (link == null) {var nodes = stage.find("node");var nodeA, nodeZ;if (a.nodeSrc && a.nodeDst) {nodes.forEach(function (nodeElement) {if (nodeElement.elementType == "node") {if (nodeElement.nodeId == a.nodeSrc) {nodeA = nodeElement; //起点}if (nodeElement.nodeId == a.nodeDst) {nodeZ = nodeElement; //终点}}});}//绘制折线var c = null;if (nodeA && nodeZ) {// 折线和直线绘制if (a["lineType"] == "line") {c = new JTopo.Link(nodeA, nodeZ);c.lineType = "line";}if (a["lineType"] == "foldLine") {c = new JTopo.FoldLink(nodeA, nodeZ);c.bundleOffset = 40;c.direction = a.direction;c.lineType = "foldLine";}if (a["lineType"] == "flexLine") {c = new JTopo.FlexionalLink(nodeA, nodeZ);c.offsetGap = 40;c.direction = a.direction;c.lineType = "flexLine";}if (a["lineType"] == "curveLine") {c = new JTopo.CurveLink(nodeA, nodeZ);c.lineType = "curveLine";}c.alpha = 1;c.shadow = false;c.font = "12px Consolas";c.arrowsRadius = 0;c.lineWidth = 1.5;c.bundleGap = 0;c.eagleEyeVsibleDefault = false;c.id = a.id;c.strokeColor = a.strokeColor;c.lineClass = a.lineClass;c.nodeSrc = nodeA.nodeId;c.nodeDst = nodeZ.nodeId;c.localDevId = a.localDevId;c.localDevIp = a.localDevIp;c.localDevIfindex = a.localDevIfindex;c.localDevIfname = a.localDevIfname;c.remoteDevId = a.remoteDevId;c.remoteDevIp = a.remoteDevIp;c.remoteDevIfindex = a.remoteDevIfindex;c.remoteDevIfname = a.remoteDevIfname;scene.add(c);}} else {link.strokeColor = a.strokeColor;}}}

代码运行效果图如下：
在这里插入图片描述
不懂可问,留言就行