最近我的项目中须要绘制拓扑图，于是钻研了下绘制拓扑图的组件，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> <div style="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; } } }代码运行效果图如下：
不懂可留言征询
具体残缺代码可看我的码云，自行下载运行即可 https://gitee.com/niexiaohua/JTopo