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

时间：2014-09-19 11:57:15 阅读：254 评论：0 收藏：0 [点我收藏+]

标签：style blog http color io os 使用 ar for

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

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

var sizes = [];
this.box.forEach(function (element) {
    if (element instanceof  twaver.Node) {
        sizes.push(element.getLinks().size());
    }
});

Array.max=function(array)
{
    return Math.max.apply(Math,array);
}
this.box.forEach(function(element){
   if(element instanceof  twaver.Node){
       if(Array.max(sizes) == element.getLinks().size()){
           <a href=‘http://twaver.servasoft.com/wp-content/uploads/2014/09/AutoLayoutDemo.html‘>AutoLayoutDemo</a>element.setClient(‘center‘, ‘center‘);
       }
   }
});

圆形布局核心代码如下：

 function roundLayout() {
            var datas = box.getDatas().toArray();
            var size = box.getDatas().toArray().length;
            if (window.innerWidth)
                winWidth = window.innerWidth;
            else if ((document.body) && (document.body.clientWidth))
                winWidth = document.body.clientWidth;
// 获取窗口高度
            if (window.innerHeight)
                winHeight = window.innerHeight;
            else if ((document.body) && (document.body.clientHeight))
                winHeight = document.body.clientHeight;
            var centerX = winWidth / 2;//圆心坐标
            var centerY = winHeight / 2;
            var radius = 0;//半径
            var N = 0; //total number of node

            box.forEach(function (data) {
                if (data.getClient(‘center‘) !== undefined) {
                    data.setCenterLocation(centerX, centerY);
                }
                if (data instanceof  twaver.Node && data.getClient(‘center‘) == undefined) {
                    N++;
                }
            });

            var c = getCRound(N);
            var i = 0;
            var n = parseInt(N / c);
            radius = network.viewRect.height / 2 / c - 30 / c;
            if (box.getClient("radius")) {
                radius = parseInt(box.getClient("radius"));
            }
            box.forEach(function (data) {
                if (data instanceof  twaver.Node && data.getClient(‘center‘) == undefined) {
                    var e = parseInt(i / n);
                    var x = centerX + (radius * Math.pow(1.5, e) * Math.cos(Math.PI * 2 / n * i + 0.2 * e));
                    var y = centerY + (radius * Math.pow(1.5, e) * Math.sin(Math.PI * 2 / n * i + 0.2 * e));
                    i++;
                    data.setCenterLocation(x, y);
                    data.setClient(‘level‘, e);
                }
            });
        }

树型布局核心代码：

 function roundLayout() {
            var datas = box.getDatas().toArray();
            var size = box.getDatas().toArray().length;
            if (window.innerWidth)
                winWidth = window.innerWidth;
            else if ((document.body) && (document.body.clientWidth))
                winWidth = document.body.clientWidth;
// 获取窗口高度
            if (window.innerHeight)
                winHeight = window.innerHeight;
            else if ((document.body) && (document.body.clientHeight))
                winHeight = document.body.clientHeight;
            var centerX = winWidth / 2;//圆心坐标
            var centerY = winHeight / 2;
            var radius = 0;//半径
            var N = 0; //total number of node

            box.forEach(function (data) {
                if (data.getClient(‘center‘) !== undefined) {
                    data.setCenterLocation(centerX, centerY);
                }
                if (data instanceof  twaver.Node && data.getClient(‘center‘) == undefined) {
                    N++;
                }
            });

            var c = getCRound(N);
            var i = 0;
            var n = parseInt(N / c);
            radius = network.viewRect.height / 2 / c - 30 / c;
            if (box.getClient("radius")) {
                radius = parseInt(box.getClient("radius"));
            }
            box.forEach(function (data) {
                if (data instanceof  twaver.Node && data.getClient(‘center‘) == undefined) {
                    var e = parseInt(i / n);
                    var x = centerX + (radius * Math.pow(1.5, e) * Math.cos(Math.PI * 2 / n * i + 0.2 * e));
                    var y = centerY + (radius * Math.pow(1.5, e) * Math.sin(Math.PI * 2 / n * i + 0.2 * e));
                    i++;
                    data.setCenterLocation(x, y);
                    data.setClient(‘level‘, e);
                }
            });
        }

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

标签：style blog http color io os 使用 ar for

原文地址：http://www.cnblogs.com/twaver/p/3980969.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行