卡布局实施

Question

我正在寻找卡片布局的实现：

• 给定一个固定宽度的画布，将布置任意数量的矩形，最初有一些边距。固定Y坐标。
• 如果矩形的数量不符合画布宽度，则每个矩形将被下一个矩形部分覆盖。最后一个反射角显示其整个宽度
• 希望在添加新矩形时自动调整布局

如果已存在或类似存在这样的事情，请分享。我希望我不必写它。

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排序。