一些特定形状的排列

转自：https://bbs.egret.com/forum.php?mod=viewthread&tid=49685&highlight=%E6%8E%92%E5%88%97

 

class DisplayLayout extends moon.MoonContainer
{
    protected panelMore:moon.PanelMoreManager;
    protected panelBar:moon.PanelBar;
    protected init():void
    {
        this.panelMore=new moon.PanelMoreManager();
        var names:string[]=[];
        names.push("组件一，正常的排列(比如游戏背包)");
        names.push("组件二，分部的排列(比如角色装备栏)");
        names.push("组件三，环绕圆形的排列");
        names.push("组件四，扇形的排列");
        names.push("组件五，椭圆形的排列");
        names.push("组件六，多边形的排列");
        names.push("组件七，三角形的排列");
        names.push("组件八，砖块（墙）的排列");
        names.push("组件九，梯形的排列");
        for(var i=0;i<names.length;i++){
            var panel:moon.PanelBar=new moon.PanelBar();
            panel.label=names[i];
            panel.addEvent(moon.MoonEvent.RENDER_COMPLETE,this.onAddStage.bind(this));
            //panel.addItem(moon.MoonUI.getCircle(200,moon.Color.random,Math.random()*200,Math.random()*200))
            this.panelMore.addItem(panel);
        }
        this.panelMore.addEvent(moon.MoonEvent.START,this.start,this);
        this.panelMore.addEvent(moon.MoonEvent.OVER,this.over,this);
        this.addChild(this.panelMore);
         
        this.show1(0);
        this.show2(1);
        this.show3(2);
        this.show4(3);
        this.show5(4);
        this.show6(5);
        this.show7(6);
        this.show8(7);
        this.show9(8);
        //this.panelMore.once(egret.Event.ADDED_TO_STAGE,this.addToStageMore,this);
 
        //this.createCloseBtn();
    }
    protected createCloseBtn():void
    {
        var btn:moon.BasicButton=new moon.BasicButton();
        btn.label="关闭";
        this.addChild(btn);
        btn.addEventListener(egret.TouchEvent.TOUCH_TAP,this.close,this)
    }
    protected close(e:egret.TouchEvent):void
    {
        this.dispEvent(moon.MoonEvent.CLOSE)
        this.removeFromParent(true);
    }
    protected addToStageMore(e:egret.Event):void
    {
        this.panelMore.close();
    }
    protected start(e:moon.MoonEvent):void
    {
        //traceSimple("翻页开始");
    }
    protected over(e:moon.MoonEvent):void
    {
        //traceSimple("翻页结束");
    }
    protected onAddStage(e:moon.MoonEvent):void
    {
        var panel:moon.PanelBar=e.currentTarget as moon.PanelBar;
        panel.colorBottom=0XFCDF7C;
    }
    //------屏幕1-----
    protected show1(index:number):void
    {
        var panel:moon.PanelBar=this.panelMore.getItem(index) as moon.PanelBar;
        var rects:any[]=[];
        for(var i:number=0;i<50;i++){
            var rect:DisplayObject=moon.MoonUI.getRect(50,50,0X7C010B);
            rects.push(rect);
            panel.addItem(rect);
        }
        LayoutManager.displayRank(rects,5,2,2,10,10);
    }
    //------屏幕2-----
    protected show2(index:number):void
    {
        var panel:moon.PanelBar=this.panelMore.getItem(index) as moon.PanelBar;
        var rects:any[]=[];
        for(var i:number=0;i<9;i++){
            var rect:DisplayObject=moon.MoonUI.getRect(50,50,0X7C010B);
            rects.push(rect);
            panel.addItem(rect);
        }
        LayoutManager.displayRankPart(rects,[3,1,0,20,50,50],[6,2,20,20,300,50]);
    }
    //------屏幕3-----
    protected show3(index:number):void
    {
        var panel:moon.PanelBar=this.panelMore.getItem(index) as moon.PanelBar;
        var rects:any[]=[];
        for(var i:number=0;i<40;i++){
            var rect:DisplayObject=moon.MoonUI.getRect(50,50,0X7C010B);
            rects.push(rect);
            panel.addItem(rect);
        }
        LayoutManager.displayCircle(rects,250,250,250);
    }
    //------屏幕4-----
    protected show4(index:number):void
    {
        var panel:moon.PanelBar=this.panelMore.getItem(index) as moon.PanelBar;
        var rects:any[]=[];
        for(var i:number=0;i<10;i++){
            var rect:DisplayObject=moon.MoonUI.getRect(50,50,0X7C010B);
            rects.push(rect);
            panel.addItem(rect);
        }
        LayoutManager.displayCircle(rects,250,250,250,Math.PI/2);
    }
    //------屏幕5-----
    private show5(index:number):void
    {
         var panel:moon.PanelBar=this.panelMore.getItem(index) as moon.PanelBar;
        var rects:any[]=[];
        for(var i:number=0;i<40;i++){
            var rect:DisplayObject=moon.MoonUI.getRect(50,50,0X7C010B);
            rects.push(rect);
            panel.addItem(rect);
        }
        LayoutManager.displayCircle(rects,250,450,250,2*Math.PI,0,0,0,0,100);
    }
    //------屏幕6-----
    private show6(index:number):void
    {
        var panel:moon.PanelBar=this.panelMore.getItem(index) as moon.PanelBar;
        var rects:any[]=[];
        for(var i:number=0;i<24;i++){
            var rect:DisplayObject=moon.MoonUI.getRect(50,50,0X7C010B);
            rects.push(rect);
            panel.addItem(rect);
        }
        LayoutManager.displayPolygon(rects,250,250,250,6);
    }
    //------屏幕7-----
    private show7(index:number):void
    {
        var panel:moon.PanelBar=this.panelMore.getItem(index) as moon.PanelBar;
        var rects:any[]=[];
        for(var i:number=0;i<15;i++){
            var rect:DisplayObject=moon.MoonUI.getRect(50,50,0X7C010B);
            rects.push(rect);
            panel.addItem(rect);
        }
        LayoutManager.displayTrigon(rects,10,10,200,100);
    }
    //------屏幕8-----
    private show8(index:number):void
    {
        var panel:moon.PanelBar=this.panelMore.getItem(index) as moon.PanelBar;
        var rects:any[]=[];
        for(var i:number=0;i<400;i++){
            var rect:DisplayObject=moon.MoonUI.getRect(60,40,0X7C010B);
            rects.push(rect);
            panel.addItem(rect);
        }
        LayoutManager.displayWall(rects,15,2,2,-30,0,30);
    }
    //------屏幕8-----
    private show9(index:number):void
    {
        var panel:moon.PanelBar=this.panelMore.getItem(index) as moon.PanelBar;
        var rects:any[]=[];
        for(var i:number=0;i<100;i++){
            var rect:DisplayObject=moon.MoonUI.getRect(60,20,0X7C010B);
            rects.push(rect);
            panel.addItem(rect);
        }
        LayoutManager.displayLadder(rects,100,400,5,5);
    }
}

class LayoutManager extends egret.HashObject {
                /**
                 * 可视对象排列
                 * xNum在x轴上排列的数量
                 * xDis,yDis,在x轴与y轴上的间距
                 * x,y初始位置
                 * sign:正1从左向右从上向下排当sign为负1时则反过来,,*/
                public static displayRank(array:any[],xNum:number=1,xDis:number=0,yDis:number=0,x:number=0,y:number=0,sign:number=1):void
                {
                        var display:egret.DisplayObject;
                        for(var i:number=0;i<array.length;i++){
                                display=array[i];
                                display.x=x+Math.floor(i%xNum)*(display.width+xDis)*sign;
                                display.y=y+Math.floor(i/xNum)*(display.height+yDis)*sign;
                        }
                }
                /**
                 * 分部的可视对象排列
                 * array:视对象数组
                 * part1,part2：[len:number,xNum:number,xDis:number,yDis:number,x:number,y:number],参看方求displayRank的参数
                 * sign:正1从左向右从上向下排当sign为负1时则反过来
                 * part1[0]+part2[0]==array.length;//如果为false,会有问题
                 * */
                public static displayRankPart(array:any[],part1:any[],part2:any[]=null,sign:number=1):void
                {
                        var len1:number,len2:number,xNum:number,xDis:number,yDis:number,x:number,y:number
                        var display:egret.DisplayObject;
                        len1=part1[0];xNum=part1[1];xDis=part1[2];yDis=part1[3];x=part1[4];y=part1[5];
                        var arr1:any[]=array.slice(0,len1);
                        LayoutManager.displayRank(arr1,xNum,xDis,yDis,x,y,sign);
                        if(part2){
                                len2=part2[0];xNum=part2[1];xDis=part2[2];yDis=part2[3];x=part2[4];y=part2[5];
                                var arr2:any[]=array.slice(len1,len1+len2);
                                LayoutManager.displayRank(arr2,xNum,xDis,yDis,x,y,sign);
                        }
                }
                /**
                 * 按顺时针环绕圆形/扇形/椭圆形的排列布局
                 * center中心位置
                 * radius半径距离
                 * loop环形排列为2*Math.PI,如果值是Math.PI/2是90度的扇形
                 * skewR偏离的弧度（90度=Math.PI/2弧度）
                 * skewX偏离的X轴位置
                 * skewY偏离的Y轴位置
                 * skewXR在X轴上半径增加的值（椭圆布局）
                 * skewYR在Y轴上半径增加的值（椭圆布局）
                 * */
                public static displayCircle(array:any[],centerX:number,centerY:number,radius:number,loop:number=2*Math.PI,skewR:number=0,skewX:number=0,skewY:number=0,skewXR:number=0,skewYR:number=0):void
                {
                        var display:egret.DisplayObject;
                        var count:number=array.length;
                        var radian:number=loop/count
                        if(loop<2*Math.PI){//如果是扇形的必须把个数减少一个再相除
                                radian=loop/(count-1)
                        }
                        for(var i:number=0;i<count;i++){
                                display=array[i];
                                display.x=centerX+Math.cos(radian*i-skewR)*(radius+skewXR)+skewX;
                                display.y=centerY+Math.sin(radian*i-skewR)*(radius+skewYR)+skewY;
                        }
                }
                /**
                 * 按顺时针环绕多边形的排列布局
                 * center中心位置
                 * radius半径距离
                 * size边数
                 * skewR偏离的弧度（90度=Math.PI/2弧度）
                 * 需要注意的是边数必须是数组长度的除数
                 * */
                public static displayPolygon(array:any[],centerX:number,centerY:number,radius:number=100,size:number=5,skewR:number=0):void
                {
                        if(size<3||size>array.length){
                                console.log("多边形的边数不正确")
                                return;
                        }
                        var display:egret.DisplayObject;
                        var count:number=array.length;
                        var radian:number=2*Math.PI/size;//每个边的弧度
                        var num:number=Math.floor(count/size);//每个边的个数
                        for (var i:number=0;i<size;i++) {
                                var x1:number=centerX + Math.cos(i*radian-skewR)*radius;
                                var y1:number=centerY + Math.sin(i*radian-skewR)*radius;
                                var j:number=i+1;
                                j=j==size?0:j;
                                var x2:number=centerX + Math.cos(j*radian-skewR)*radius;
                                var y2:number=centerY + Math.sin(j*radian-skewR)*radius;
                                for(var k:number=0;k<num;k++){
                                        var m:number=k+num*i;
                                        if(m<count){
                                                display=array[m];
                                                display.x=x1;
                                                display.y=y1;
                                                display.x+=(x2-x1)/num*k;
                                                display.y+=(y2-y1)/num*k;
                                        }
                                }
                        }
                }
                /**
                 * 三角形排列布局
                 * xDis,yDis,在x轴与y轴上的间距
                 * x,y初始位置
                 * sign:正1从左向右从上向下排当sign为负1时则反过来
                 * isCenter是等腰三角形，为false时是直角三角形
                 * */
                public static displayTrigon(array:any[],xDis:number=0,yDis:number=0,x:number=0,y:number=0,sign:number=1,isCenter:boolean=true):void
                {
                        var display:egret.DisplayObject;
                        var start:number=0;
                        var len:number=1
                        var index:number=1;
                        var temps:any[]=array.slice(start,len);
                        rank();
                        function rank():void{
                                var cx:number=0;
                                var tempLen:number=temps.length
                                if(tempLen>1&&isCenter){
                                        cx=(tempLen-1)*(display.width+xDis)/-2*sign;
                                }
                                for(var i:number=0;i<tempLen;i++){
                                        display=temps[i];
                                        display.x=x+i*(display.width+xDis)*sign+cx;
                                        display.y=y+(index-1)*(display.height+yDis)*sign;
                                }
                                index++;
                                start=len;
                                len=start+index;
                                temps=array.slice(start,len);
                                if(len<=array.length+start){
                                        rank();
                                }
                        }
                }
                /**
                 * 可视对象砖块（墙）排列
                 * xNum在x轴上排列的数量
                 * xDis,yDis,在x轴与y轴上的间距
                 * x,y初始位置
                 * offX:偏移的距离,*/
                public static displayWall(array:any[],xNum:number=1,xDis:number=0,yDis:number=0,x:number=0,y:number=0,offX:number=10):void
                {
                        var display:egret.DisplayObject;
                        for(var i:number=0;i<array.length;i++){
                                var xx:number=Math.floor(i/xNum)%2==0?offX:0;
                                display=array[i];
                                display.x=x+Math.floor(i%xNum)*(display.width+xDis)+xx;
                                display.y=y+Math.floor(i/xNum)*(display.height+yDis);
                        }
                }
                /**面积不相等的块在X轴的排列 
                 * xNum在x轴上排列的数量
                 * xDis,在x轴上的间距
                 * x,y初始位置
                 * offX:偏移的距离,*/
                public static displayRankX(array:any[],xNum:number=1,xDis:number=0,x:number=0,y:number=0):void
                {
                        var display:egret.DisplayObject;
                        var count:number=array.length;
            var prevx:number=0;
            for(var i:number=0;i<count;i++){
                                display=array[i]
                var width:number=display.width;
                display.y=y
                display.x=prevx;
                prevx=display.x+(display.width+xDis);
            }
                }
                /**
                 * 可视对象梯形的排列
                 * min在x轴上排列的最小的数值，用于拐弯
                 * max在x轴上排列的最大的数值，用于拐弯
                 * xDis,yDis,在x轴与y轴上的间距
                 * x,y初始位置
                 */
                public static displayLadder(array:any[],min:number=0,max:number=200,xDis:number=0,yDis:number=0,x:number=0,y:number=0):void
                {
                        var j:number=0;
                        var s:number=1;
                        var display:egret.DisplayObject;
                        var count:number=array.length;
            for(var i:number=0;i<count;i++){
                                display=array[i]
                var width:number=display.width;
                                var height:number=display.height;
                                display.y=y+i*(height+xDis);
                                display.x=x+j*(width+yDis);
                                j+=s;
                                if(display.x>max){
                                        s=-1
                                }else if(display.x<min){
                                        s=1;
                                }
                        }
                }
        }