AS3 - 根据数组长度创建具有可自定义行和列值的网格？答案

【问题标题】：AS3 - Create a grid with customizable row and col values based on array length?AS3 - 根据数组长度创建具有可自定义行和列值的网格？
【发布时间】：2012-09-24 09:55:02
【问题描述】：

我正在开发一个布局插件，以将添加到父对象的所有项目以网格形式放置。我希望能够设置列、行、填充值。我将所有子对象推入一个数组，然后用 for 循环循环这些对象。我已经尝试使用双 for 循环来检查对象需要放置的位置，但这总是给我 index out of bounds 错误。目前我正在使用此代码来设置我的网格结构：

    var COLUMNS:int = vars.columns;
    var PADDING:Number = 10;


    for(var i:int = 0; i < childs.length; i++)
    {
        childs[i].x = (i % COLUMNS) * (childs[i].width + PADDING);
        childs[i].y = int(i / COLUMNS) * (childs[i].height + PADDING);
    }

这是我如何使用此插件的示例： 注意：Draw 对象只返回一个尺寸为 150x150 的精灵

    var container:Sprite = new Sprite();
    var obj1:Draw = new Draw({x:0 ,y:0 ,width:_width,height:_height, color:Constants.GREEN});
    var obj2:Draw = new Draw({x:0 ,y:0 ,width:_width,height:_height, color:0x2C2C2C});
    var obj3:Draw = new Draw({x:0 ,y:0 ,width:_width,height:_height, color:Constants.BLACK});
    var obj4:Draw = new Draw({x:0 ,y:0 ,width:_width,height:_height, color:Constants.GREEN});
    var obj5:Draw = new Draw({x:0 ,y:0 ,width:_width,height:_height, color:Constants.GREEN});
    var obj6:Draw = new Draw({x:0 ,y:0 ,width:_width,height:_height, color:0x2C2C2C});
    var obj7:Draw = new Draw({x:0 ,y:0 ,width:_width,height:_height, color:Constants.BLACK});
    var obj8:Draw = new Draw({x:0 ,y:0 ,width:_width,height:_height, color:Constants.GREEN});
    var obj9:Draw = new Draw({x:0 ,y:0 ,width:_width,height:_height, color:Constants.GREEN});

    addChild(container);
    container.addChild(obj1);
    container.addChild(obj2);
    container.addChild(obj3);
    container.addChild(obj4);
    container.addChild(obj5);
    container.addChild(obj6);
    container.addChild(obj7);
    container.addChild(obj9);

    Layout.setLayout(new GridLayout(container, {columns:4, rows:10, spacing:2}));

有人知道如何使用固定列、行、间距创建更好的网格循环，其中所有对象都由较早填充的数组检索？

【问题讨论】：

标签： actionscript-3 layout grid grid-layout

【解决方案1】：

我找到了如何完成这项工作！对于感兴趣的人：

1) 绘制网格前检查

    var cols:int = vars.columns;
    var rows:int = vars.rows;
    var spacing:int = vars.spacing;


    if((cols * rows) >= childs.length) {
        drawComplexGrid(rows, cols, spacing);
    } else {
        var val:int = Math.max(rows, cols);
        drawComplexGrid(val,(childs.length/val), spacing);
    }

2) 实际绘制网格并检查数组是否为空（子数组已经填充了一些“绘制”对象

private function drawComplexGrid(rows:int, cols:int, spacing:int):void
{
    for (var py:int = 0; py <rows; py++)
    {
        for (var px:int = 0; px <cols; px++)
        {
            if(childs.length > 0)
            {
                var child:* = childs.shift();

                child.x = (child.width + spacing) * px;
                child.y = (child.height + spacing) * py;

            } else {
                break;
            }

        }
    }
}

【讨论】：