AS3 — создать сетку с настраиваемыми значениями строк и столбцов на основе длины массива?

Я работаю над плагином Layout, чтобы поместить все элементы, добавленные в объект parent, в виде сетки. Я хочу иметь возможность устанавливать столбец, строку, значения заполнения. Я помещаю все дочерние объекты в массив и зацикливаю их с помощью цикла 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}));

Кто-нибудь знает, как создать лучший цикл сетки с фиксированными столбцами, строками, интервалами, где все объекты извлекаются из ранее заполненного массива?


layout grid grid-layout actionscript-3
person Nicholas    schedule 03.10.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я нашел, как я мог сделать эту работу! для интересующихся:

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) Фактически рисуем сетку и проверяем, пуст ли массив (дочерний массив уже заполнен несколькими объектами "Draw"

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

        }
    }
}
person Nicholas    schedule 03.10.2012