TWaver - 专注UI技术

http://twaver.servasoft.com/
posts - 171, comments - 191, trackbacks - 0, articles - 2
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

如何创建环型、树型双层布局

Posted on 2014-09-19 10:42 TWaver 阅读(3166) 评论(2)  编辑  收藏

TWaver的Demo中有常用的环型布局和树型布局，但是当网元数量较多，又不想zoomOverView,聪明的我们自然会想到使用双层布局，整体效果既不会显得很拥挤，也能刚好充满整个窗口，如下图的效果：


实现这样布局效果实现的步骤：
1.将link个数最多的Node作为圆点或顶点。
2.分别计算所有点的位置。
查找圆点或顶点的核心代码如下：

1var sizes = [];
2this.box.forEach(function (element) {
3    if (element instanceof  twaver.Node) {
4        sizes.push(element.getLinks().size());
5    }
6});
7 
8Array.max=function(array)
9{
10    return Math.max.apply(Math,array);
11}
12this.box.forEach(function(element){
13   if(element instanceof  twaver.Node){
14       if(Array.max(sizes) == element.getLinks().size()){
15           <a href='http://twaver.servasoft.com/wp-content/uploads/2014/09/AutoLayoutDemo.html'>AutoLayoutDemo</a>element.setClient('center','center');
16       }
17   }
18});

圆形布局核心代码如下：

1function roundLayout() {
2            var datas = box.getDatas().toArray();
3            var size = box.getDatas().toArray().length;
4            if (window.innerWidth)
5                winWidth = window.innerWidth;
6            else if ((document.body) && (document.body.clientWidth))
7                winWidth = document.body.clientWidth;
8// 获取窗口高度
9            if (window.innerHeight)
10                winHeight = window.innerHeight;
11            else if ((document.body) && (document.body.clientHeight))
12                winHeight = document.body.clientHeight;
13            var centerX = winWidth / 2;//圆心坐标
14            var centerY = winHeight / 2;
15            var radius = 0;//半径
16            var N = 0; //total number of node
17 
18            box.forEach(function (data) {
19                if (data.getClient('center') !== undefined) {
20                    data.setCenterLocation(centerX, centerY);
21                }
22                if (data instanceof  twaver.Node && data.getClient('center') == undefined) {
23                    N++;
24                }
25            });
26 
27            var c = getCRound(N);
28            var i = 0;
29            var n = parseInt(N / c);
30            radius = network.viewRect.height / 2 / c - 30 / c;
31            if (box.getClient("radius")) {
32                radius = parseInt(box.getClient("radius"));
33            }
34            box.forEach(function (data) {
35                if (data instanceof  twaver.Node && data.getClient('center') == undefined) {
36                    var e = parseInt(i / n);
37                    var x = centerX + (radius * Math.pow(1.5, e) * Math.cos(Math.PI * 2 / n * i + 0.2 * e));
38                    var y = centerY + (radius * Math.pow(1.5, e) * Math.sin(Math.PI * 2 / n * i + 0.2 * e));
39                    i++;
40                    data.setCenterLocation(x, y);
41                    data.setClient('level', e);
42                }
43            });
44        }

树型布局核心代码：

1function roundLayout() {
2            var datas = box.getDatas().toArray();
3            var size = box.getDatas().toArray().length;
4            if (window.innerWidth)
5                winWidth = window.innerWidth;
6            else if ((document.body) && (document.body.clientWidth))
7                winWidth = document.body.clientWidth;
8// 获取窗口高度
9            if (window.innerHeight)
10                winHeight = window.innerHeight;
11            else if ((document.body) && (document.body.clientHeight))
12                winHeight = document.body.clientHeight;
13            var centerX = winWidth / 2;//圆心坐标
14            var centerY = winHeight / 2;
15            var radius = 0;//半径
16            var N = 0; //total number of node
17 
18            box.forEach(function (data) {
19                if (data.getClient('center') !== undefined) {
20                    data.setCenterLocation(centerX, centerY);
21                }
22                if (data instanceof  twaver.Node && data.getClient('center') == undefined) {
23                    N++;
24                }
25            });
26 
27            var c = getCRound(N);
28            var i = 0;
29            var n = parseInt(N / c);
30            radius = network.viewRect.height / 2 / c - 30 / c;
31            if (box.getClient("radius")) {
32                radius = parseInt(box.getClient("radius"));
33            }
34            box.forEach(function (data) {
35                if (data instanceof  twaver.Node && data.getClient('center') == undefined) {
36                    var e = parseInt(i / n);
37                    var x = centerX + (radius * Math.pow(1.5, e) * Math.cos(Math.PI * 2 / n * i + 0.2 * e));
38                    var y = centerY + (radius * Math.pow(1.5, e) * Math.sin(Math.PI * 2 / n * i + 0.2 * e));
39                    i++;
40                    data.setCenterLocation(x, y);
41                    data.setClient('level', e);
42                }
43            });
44        }

评论

# re: 如何创建环型、树型双层布局  回复  更多评论   

2014-09-19 11:43 by 顾陌博客
初学java,感觉myeclipse 不好用啊... 。www.songker.com

# re: 如何创建环型、树型双层布局[未登录]  回复  更多评论   

2014-12-10 11:39 by a
getCRound(N)方法的实现是什么呢？谢谢

只有注册用户登录后才能发表评论。
网站导航: