AS3 - 删除父容器中的子项不会正确重新定位子项

Question

我创建了这个插件，它以容器的形式定位容器的所有子对象。现在我向容器中的子项添加了一个clickhandler，当我单击其中一个时，它将被删除。当我从右侧移除一整行（从上到下）时，一切顺利，但当我在左侧移除一整行时，容器中所有物品的位置保持在他们的位置，但是容器本身将被移动到x = 0和y = 0.我想要的是容器中的所有子项都被移动到x：0，y：0作为一个组。

关于我得到的和我想要的一些照片：

1）我得到了什么：

2）当我删除左侧的整行时，我得到了什么：

3）我想要的是什么：

我使用的代码：

private function clickHandler(event:MouseEvent):void {


    var name:String = event.currentTarget.name;

    if(container.getChildByName(name) != null)
    container.removeChild(container.getChildByName(name));
    trace(name, "container.width: ", container.width);
    trace(name, "container.width: ", container.height);
    trace(name, "container.x: ", container.x);

    container.graphics.clear();
    container.graphics.beginFill(0x2C2C2C);
    container.graphics.drawRect(container.x ,container.y, container.width, container.height);
    container.graphics.endFill();

}

任何人都知道如何解决这个问题？ ：）

编辑：创建网格的代码：

private function generateGrid(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;
                }

            }
        }


    }

Answer 1

没有什么可以'修复'，你只是没有编写任何代码来移动这些对象，所以它们没有移动。您正在根据新宽度重新绘制容器的背景，但实际上并未移动该容器内的任何对象。

有很多方法可以做到这一点。想到的最简单的解决方案是这样的：
- 遍历容器的所有子项，找到最低x位置 - 再次循环，从每个孩子的x位置减去最低x值。

（您可能也希望在y位置执行此操作，因此当您移除顶行时它们会向上移动。）

每次删除子项时，您都会运行整个过程。如果最低位置为0，意味着在最左边的位置有一个物体，那么没有任何动作，如果有一个空白行，则最低的x将大于0，并且一切都将移动该数量。

<强>声明：
将图形视图与数据结构混淆在一起可能会“更好”，但这是我能提供的最佳建议，而不会看到其余的代码。

Answer 2

package  {

    import flash.display.Sprite;
    import flash.events.MouseEvent;

    public class Grid extends Sprite{

        private var _squ:Square;
        private var _cont:Sprite;

        public function Grid() {
            // constructor code
            _cont = new Sprite();
            addChild(_cont);
            for( var i:uint = 0;i< 20; i++){
                _squ = new Square(50,50,2,Math.random() * 0xFFFFFF);
                _cont.addChild(_squ);
                _squ.name = "square_"+i;
                _squ.x = 100 + 52 * Math.round(i%5);
                _squ.y = 50 + 52 * Math.floor(i/5);
                _squ.buttonMode = true;
            }           
            this.addEventListener(MouseEvent.CLICK, onClickAction);
        }
        public function gridAlign(cont:Sprite):void{
            for( var i:uint = 0;i< cont.numChildren; i++){                              
                _cont.getChildAt(i).x = 100 + 52 * Math.round(i%5);
                _cont.getChildAt(i).y = 50 + 52 * Math.floor(i/5);
            }
        }
        private function onClickAction(e:MouseEvent):void{
            _cont.removeChild(_cont.getChildByName(e.target.name));
            this.gridAlign(_cont);
        }
    }   
}

试试这个。