卡布局实施

Question

即时寻找一个卡布局的实施方案：给定一个固定的宽度画布

• ，矩形的任意数量的将被布局，具有一定的边距最初。固定的Y坐标。
• 如果矩形的数量不符合画布宽度，则每个矩形都将被下一个矩形部分覆盖。可见其整个宽度的最后reactangle
• 希望有布局自动调整为我添加一个新的矩形

，如果有这样的东西已经存在或类似的，请份额。希望我不必写它。

Answer 1

像@puggsoy，我想不出一个这样做的库，但这里有一个简单的函数，应该做你需要的。

function updateLayout(canvasWidth:Number, rects:Array, rectWidth:Number, margin:Number):void 
{ 
    var totalWidth:Number = rects.length * rectWidth + ((rects.length-1)*margin); 
    var offset:Number = rectWidth + margin; 
    if(totalWidth > canvasWidth) 
    { 
     offset = (canvasWidth - rectWidth)/(rects.length-1); 
    } 

    var currX:Number = 0; 
    for each(var rect:DisplayObject in rects) 
    { 
     rect.x = currX; 
     currX += offset; 
    } 
} 

这假定rects数组中的DisplayObjects按其childIndex排序。