AS3 - 根据数组长度创建具有可自定义行和列值的网格? [英] AS3 - Create a grid with customizable row and col values based on array length?

问题描述

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

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

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

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

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

推荐答案

我找到了如何实现这个功能！对于感兴趣的人:

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 - 根据数组长度创建具有可自定义行和列值的网格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！