jTopo简单介绍从入门到放弃

最近在项目中需要绘制拓扑图，于是研究了一下绘制拓扑图的组件。jtopo是一个比较简单易用的开发工具包，分享给大家。jtopo的特点1.完全基于HTML5Canvas开发，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代码：js代码：varcanvas=document.getElementById("topology-canvas");varstage=newJTopo.Stage(canvas);//创建画布varscene=newJTopo.Scene(stage);//创建背景_this.scene=scene;varchildrens=topoData;for(letiinchildren){vara=children[i];if(a.elementType=="node"){//如果是拓扑节点//节点varnode=newJTopo.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);}elseif(a.elementType=="link"){//如果是连线varlink=null;if(link==null){varnodes=stage.find("node");varnodeA,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;//终点}}});}//绘制折线varc=null;if(nodeA&&nodeZ){//绘制折线和直线if(a["lineType"]=="line"){c=newJTopo.Link(nodeA,nodeZ);c.lineType="线条";}if(a["lineType"]=="foldLine"){c=newJTopo.FoldLink(nodeA,nodeZ);c.bundleOffset=40;c.direction=a.direction;c.lineType="折线";}if(a["lineType"]=="flexLine"){c=newJTopo.FlexionalLink(nodeA,nodeZ);c.offsetGap=40;c.direction=a.direction;c.lineType="弹性线";}if(a["lineType"]=="曲线线"){c=newJTopo.CurveLink(nodeA,nodeZ);c.lineType="curveLine";}c.alpha=1;c.shadow=false;c.font="12pxConsolas";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;场景。添加（c）；}}else{link.strokeColor=a.strokeColor;}}}代码运行效果图如下：有不懂的可以留言咨询具体完整的代码。可以看我的码云，自己下载运行https://gitee.com/niexiaohua/JTopo