AS3 - 创建一个基于数组长度自定的行和col值的网格？ [英] AS3 - Create a grid with customizable row and col values based on array length?

问题描述

我工作的一个布局插件来将所有的项目添加到在父母在网格中形成对象。我希望能够以设置列，行填充的值。我把所有子对象到一个数组，我这些循环使用的的循环。我已经尝试过使用一个双循环来检查至极位置的对象需要放置但总是给我的索引越界的错误。目前我使用这个code设置我的网格形成的：

I'm working on a Layout plugin to place all items added to the the parent object in a grid formation. I want to be able to set the column, row, padding values. I push all child objects into an array and I loop these with a for loop. I already tried to use a double for loop to check on wich position the objects need to be placed but that always gave me index out of bounds errors. Currently I'm using this code to set up my grid formation:

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

和这里是我如何使用这个插件的例子： 注意：在绘制对象只返回一个精灵具有150×150的尺寸

and here is an example of how I'm using this plugin: NOTE: The Draw objects just return a sprite with the dimensions of 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}));

任何人有关于如何创建一个更好的网格圈是固定列，行间距，所有的对象由早期的充满阵列检索到的任何想法？

推荐答案

我发现我怎么能做出这样的工作！ 对于谁是interessed人：

I found how I could make this work! for the people who are interessed:

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

        }
    }
}

这篇关于AS3 - 创建一个基于数组长度自定的行和col值的网格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！