jTopo 拓扑图(入门)
2019-02-15 15:11 小花儿鹿 阅读(5469) 评论(0) 编辑 收藏 举报jTopo是我在17年用到过的一款绘制拓扑图的插件,该插件使用yH5 Canvas进行绘制元素以及操作元素,优点在于可实现数据的依赖关系图形化处理,缺点就是使用canvas有时候会出现一些功能难以实现。除此之外,像现在市面上比较流行的Qunee拓扑图插件,如果你的资金准备充足建议使用这款产品,因为该产品的api做的比较详尽,同时ui效果也相比jTopo要好的多,但是如果你想免费使用拓扑图插件的话,jTopo则可以暂时列为你的首选。
废话不多说了,jTopo的官网:http://www.jtopo.com/,下载下最新的js:http://www.jtopo.com/download.html -> jtopo-0.4.8-min.js
官网入门demo1 元素节点
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #canvas{ background: red; } </style> </head> <body> <canvas id="canvas" width="300" height="300"></canvas> <script type="text/javascript" src="js/jTopo/jtopo-0.4.8-min.js" ></script> <script type="text/javascript"> var canvas = document.getElementById('canvas'); var stage = new JTopo.Stage(canvas); // 创建一个舞台对象 var scene = new JTopo.Scene(stage); // 创建一个场景对象 var node = new JTopo.Node("Hello"); // 创建一个节点 node.setLocation(100,100); // 设置节点坐标 scene.add(node); // 放入到场景中 </script> </body> </html>
官网入门demo2 图片节点
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #canvas{ background: red; } </style> </head> <body> <canvas id="canvas" width="300" height="300"></canvas> <script type="text/javascript" src="js/jTopo/jtopo-0.4.8-min.js" ></script> <script type="text/javascript"> var canvas = document.getElementById('canvas'); var stage = new JTopo.Stage(canvas); // 创建一个舞台对象 var scene = new JTopo.Scene(stage); // 创建一个场景对象 var node = new JTopo.Node("Hello"); // 创建一个节点 node.setLocation(100,100); // 设置节点坐标 node.rotate = Math.random(); // 旋转角度 node.scaleX = Math.random(); // 水平方向的缩放 node.scaleY = Math.random(); // 垂直方向的缩放 node.alpha = Math.random(); // 透明度 node.setImage('img/lbxx.jpeg'); // 设置图片 scene.add(node); // 放入到场景中 </script> </body> </html>
官方入门demo3 连线
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #canvas{ background: red; } </style> </head> <body> <canvas id="canvas" width="300" height="300"></canvas> <script type="text/javascript" src="js/jTopo/jtopo-0.4.8-min.js" ></script> <script type="text/javascript"> var canvas = document.getElementById('canvas'); var stage = new JTopo.Stage(canvas); // 创建一个舞台对象 var scene = new JTopo.Scene(stage); // 创建一个场景对象 var nodeFrom = new JTopo.Node("from"); nodeFrom.setLocation(50,50); scene.add(nodeFrom); var nodeTo = new JTopo.Node("To"); nodeTo.setLocation(100,100); scene.add(nodeTo); var link = new JTopo.Link(nodeFrom, nodeTo); // 增加连线 scene.add(link); </script> </body> </html>