AS3 - 根据数组长度创建一个具有可自定义行和列值的网格?

时间:2012-10-03 12:59:13

标签: actionscript-3 layout grid grid-layout

我正在使用布局插件将所有添加到对象的项目放在网格形式中。我希望能够设置列,行,填充值。我将所有子对象推送到一个数组中,然后使用 for 循环将它们循环。我已经尝试使用双循环来检查对象需要放置的位置,但这总是给我索引越界错误。目前我正在使用此代码来设置我的网格形成:

    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}));

任何人都知道如何使用固定列,行,间距来创建更好的网格循环,其中所有对象都由之前填充的数组检索?

1 个答案:

答案 0 :(得分: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;
            }

        }
    }
}