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

3. JTopo Demo -- 圆形布局

步骤：  获取canvas ——> 创建stage ——> 创建scene添加的stage ——> 创建节点添加到scene

$(document).ready(function(){var canvas = document.getElementById(‘canvas‘);var stage = newJTopo.Stage(canvas);//显示工具栏

showJTopoToobar(stage);var scene = newJTopo.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 = newJTopo.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(newJTopo.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中。例子如下：

varstage;

$(document).ready(function(){var canvas = document.getElementById(‘canvas‘);

stage= newJTopo.Stage(canvas);//显示工具栏

showJTopoToobar(stage);var scene = newJTopo.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;

}

});

});

View Code

3.关于link的样式：

简单连线

Link

折线

FoldLink

二次折线

FlexionalLink

曲线

CurveLink

还在探索中，持续更新。。。