jTopo生成网络拓扑图

jTopo（Javascript Topology library)是一款完全基于HTML5 Canvas的关系、拓扑图形化界面开发工具包。官网：http://www.jtopo.com/

jTopo是免费的，而且文档是中文的，很容易看懂。你可以基于它进行二次开发，能够快速创建一些关系图、拓扑等相关图形化的展示。

下面是我用jTopo绘制网络拓扑图的小例子：

<!DOCTYPE html>
<html>
    <head>
        <title> </title>
        <script src="./jtopo-0.4.8-min.js"></script>
        <script src="./jquery.js"></script>
        <script type="text/javascript">
                   
           $(document).ready(function(){
                function node(x, y, img){
                    var node = new JTopo.Node();
                    node.setImage('./img/' + img, true);                
                    node.setLocation(x, y);
                    scene.add(node);
                    return node;
                }
                function node2(img){
                    var node = new JTopo.Node();
                    node.setImage('./img/' + img, true);                
                    // node.setLocation(x, y);
                    scene.add(node);
                    return node;
                }
                function linkNode(nodeA, nodeZ, f){
                    var link;
                    if(f){
                        link = new JTopo.FoldLink(nodeA, nodeZ);
                    }else{
                        link = new JTopo.Link(nodeA, nodeZ);
                    }
                    link.direction = 'vertical';
                    scene.add(link);
                    return link;
                }

                var canvas = document.getElementById('canvas');         
                var stage = new JTopo.Stage(canvas);
                var scene = new JTopo.Scene(stage);
                //设置背景
                scene.background = './img/bg.jpg';

                var r1 = node(500, 100, 'router.png');
                //使用树形拓扑时，根节点要做如下赋值
                r1.layout = {type: 'tree', width:100, height: 100};

                // var s1 = node(400, 100, 'server.png');
                var s1 = node2('server.png');
                s1.text = '192.168.1.1'; // 文字
                s1.fontColor = '0,0,0';
                

                // var s2 = node(400, 200, 'server.png');
                var s2 = node2('server.png');
                s2.text = '192.168.1.2'; 
                s2.fontColor = '0,0,0';
                // s2.layout = {type: 'tree', width:50, height: 100};

                var c1 = node(100, 100, 'client.png');
                c1.text = '127.0.0.1'; 
                c1.fontColor = '0,0,0';

                var cloud = node(200, 80, 'cloud.png');
                cloud.text='公网';
                cloud.textPosition = 'Middle_Center';// 文字居中
                cloud.fontColor = '0,0,0';

                var web_server = node(300, 100, 'server_database.png');
                web_server.text='web服务器';
                web_server.fontColor = '0,0,0';

                var r2 = node(400, 100, 'router.png');
                linkNode(c1,cloud);
                linkNode(cloud,web_server);
                linkNode(web_server,r2);
                linkNode(r2,r1);

                //画树形拓扑时要把父节点放置于第一个参数，比如此函数中的r1
                linkNode(r1, s1);
                linkNode(r1, s2);

                s2.alarm="ping不通";
                setInterval(function(){
                    if(s2.alarm == 'ping不通'){
                        s2.alarm = null;
                    }else{
                        s2.alarm = 'ping不通'
                    }
                }, 600);
                // linkNode(h1, r1);

                JTopo.layout.layoutNode(scene, r1, true);

            }
            );

        </script>
    </head>
    <body>
        <canvas id="canvas" width="910" height="400"></canvas>
    </body>
</html>

效果图如：

 

posted @ 2018-05-25 20:31  lovealways  阅读(12766)  评论(1)  编辑  收藏  举报