代码改变世界

jTopo 拓扑图(入门)

2019-02-15 15:11  小花儿鹿  阅读(5587)  评论(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>