转自: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;
}
}
}
}