JTopo 使用

1. 下載JTopo js http://www.jtopo.com/download.html

2. 引入js文件，引入jtopo之前引入jQuery

3. JTopo Demo -- 圓形布局

步驟：  獲取canvas ——> 創建stage ——> 創建scene添加的stage ——> 創建節點添加到scene

$(document).ready(function(){                    
            var canvas = document.getElementById('canvas');
            var stage = new JTopo.Stage(canvas);
            //顯示工具欄
            showJTopoToobar(stage);
            var scene = new JTopo.Scene();
            stage.add(scene);
            scene.background = './img/bg.jpg';
            
            var cloudNode = new JTopo.Node('root');
            cloudNode.setSize(30, 26);
            cloudNode.setLocation(360,230);            
            cloudNode.layout = {type: 'circle', radius: 150};
            
            scene.add(cloudNode);
            
            for(var i=1; i<4; i++){
                var node = new JTopo.CircleNode('host' + i);
                node.fillStyle = '200,255,0';
                node.radius = 15;
                node.setLocation(scene.width * Math.random(), scene.height * Math.random());
                node.layout = {type: 'circle', radius: 80};
                
                scene.add(node);                                
                var link = new JTopo.Link(cloudNode, node);
                scene.add(link);
                
                for(var j=0; j<6; j++){
                    var vmNode = new JTopo.CircleNode('vm-' + i + '-' + j);
                    vmNode.radius = 10;
                    vmNode.fillStyle = '255,255,0';
                    vmNode.setLocation(scene.width * Math.random(), scene.height * Math.random());
                    scene.add(vmNode);                                
                    scene.add(new JTopo.Link(node, vmNode));                            
                }
            }
            JTopo.layout.layoutNode(scene, cloudNode, true);
            
            scene.addEventListener('mouseup', function(e){
                if(e.target && e.target.layout){
                    JTopo.layout.layoutNode(scene, e.target, true);    
                }                
            });
        });

4. 總結的問題：

　　1. 關於node的layout，目前我知道有 tree，circle 兩種，用法如下： 

         node.layout = {type: 'tree', direction: direction, width: 180, height: 80};

　　2. 關於container，也就是分組容器。container需要添加到scene中，container中添加node，需要將node添加到container以及scene中。例子如下：

var stage;
        $(document).ready(function(){
            var canvas = document.getElementById('canvas');            
            stage = new JTopo.Stage(canvas);
            //顯示工具欄
            showJTopoToobar(stage);
            var scene = new JTopo.Scene();
            scene.background = './img/bg.jpg';
            stage.add(scene);
            
            // 不指定布局的時候，容器的布局為自動(容器邊界隨元素變化）
            var container = new JTopo.Container('邊界自動變化');
            container.textPosition = 'Middle_Center';
            container.fontColor = '100,255,0';
            container.font = '18pt 微軟雅黑';
            container.borderColor = '255,0,0';
            container.borderRadius = 30; // 圓角
            scene.add(container);
            
            for(var i=0; i<5; i++){
                var node = new JTopo.Node("A_"+i);    
                node.textPosition = "Middle_Center";
                node.setLocation(300+ Math.random() * 300, 200+ Math.random() * 200);
                scene.add(node);
                container.add(node);
            }
            scene.add(new JTopo.Link(container.childs[0], container.childs[1]));
            scene.add(new JTopo.Link(container.childs[2], container.childs[3]));
            
            // 流式布局（水平、垂直間隔均為10)
            var flowLayout = JTopo.layout.FlowLayout(10, 10);
            
            // 網格布局(4行3列)
            var gridLayout = JTopo.layout.GridLayout(4, 3);
            
            var container2 = new JTopo.Container('點擊切換布局');
            container2.layout = flowLayout;
            container2.fillColor = '10,10,100';
            container2.setBound(10, 10, 300, 200);            
            scene.add(container2);
            
            for(var i=0; i<12; i++){
                var node = new JTopo.Node("F_" + i);    
                node.textPosition = "Middle_Center";
                scene.add(node);
                container2.add(node);
            }
            
            container2.click(function(){
                if(container2.layout === flowLayout){
                    container2.layout = gridLayout;
                }else{
                    container2.layout = flowLayout;
                }
            });
        });

 

　　3.關於link的樣式：

簡單連線	Link
折線	FoldLink
二次折線	FlexionalLink
曲線	CurveLink

還在探索中，持續更新。。。

 

❤ 自定義繪制帶有告警的節點：

　container容器是個非常好用的東西。我們需要繪制 1個container + 2個節點