Actionscript 3.0 - removeChild 不起作用答案

【问题标题】：Actionscript 3.0 - removeChild doesn't workActionscript 3.0 - removeChild 不起作用
【发布时间】：2012-04-17 21:06:37
【问题描述】：

我正在尝试为每次将 int 推入数组时在图形上显示一个值的图形文档编写基本代码。这是代码-

import flash.display.Shape;
import flash.display.MovieClip;
import flash.display.Sprite;
var myShape:Shape = new Shape();
myShape.graphics.lineStyle(2, 0x990000, 2);
var max:Number = 0;
var graph:Array = new Array();
var container:Sprite = new Sprite();
var redrawGraph = setInterval(reDraw,1000);
function reDraw()
    {
        while (container.numChildren)
        {
            container.removeChildAt(0);
        }
        graph.push(randomNum());
        graph.reverse();
        for (var ints in graph)
        {
        if (graph[ints] > max)
        {
            max = graph[ints];
        }
    }
for (var i:Number = 0; i < graph.length-1; i++)
{
    myShape.graphics.moveTo(550-i*50, (max – graph[i])*20);
    myShape.graphics.lineTo(550-(i+1)*50, (max – graph[i+1])*20);
    container.addChild(myShape);
}
this.addChild(container);
graph.reverse();
}

function randomNum():int
{

return Math.floor(Math.random() * 11);`

}

除了我遇到的问题是我最终得到的图形与前一个图形重叠，它应该删除旧图形形状的部分似乎没有工作......我无法弄清楚为什么。

任何帮助将不胜感激。

（抱歉格式化...它无法正常工作

【问题讨论】：

这可能是一个范围问题，我会尝试将跟踪放入 reDraw 函数以确保 container 和 this 是您所期望的。另外，请考虑使用 Timer 类而不是 setInterval。
我使用跟踪进行了检查，尽管肯定不止一个，但它似乎每个周期只调用一次 removeChildAt(0)。（它实际上并没有删除它......）

标签： actionscript-3 flash actionscript graph removechild

【解决方案1】：

您对显示对象层次结构和操作显示对象的graphics 对象之间的区别存在误解。

您正在使用setInterval 调用reDraw 回调。

在reDraw 回调中，您使用graphics.moveTo 和graphics.lineTo 来绘制图表。然而，每一帧你都在不断地画到同一个“画布”上，同一个Sprite:myShape。

不需要相互添加和删除显示对象。在这种情况下，您只需添加一次显示对象。然后在每次刷新时，清除画布并重新开始绘制。

例如，考虑以下情况：

    var myShape:Shape;
    var graph:Array;
    var container:Sprite = new Sprite();

    myShape = new Shape();
    graph = new Array();
    var redrawGraph:int = setInterval(reDraw,1000);

    container.addChild(myShape);
    this.addChild(container);

这里我正在创建一个形状，将形状放入容器中，然后将容器添加到根显示对象中，差不多就是这样。然后……

    private function reDraw():void {
        myShape.graphics.clear();
        myShape.graphics.lineStyle(2, 0x990000, 2);

        graph.unshift(randomNum());

        var i:uint, len:uint = graph.length, max:int = 0;

        for (i=0; i< len; i++) {
            max = Math.max(graph[i], max);
        }

        for (i = 0; i < len; i++)
        {
            myShape.graphics.moveTo(550-i*50, (max - graph[i])*20);
            myShape.graphics.lineTo(550-(i+1)*50, (max - graph[i+1])*20);

        }
    }

然后在这里，请注意我没有删除或添加任何内容到显示树，树已经按照我想要的方式组织。我在重绘时所做的只是清除我的形状，然后按照我想要的方式重绘它。

有时您确实需要操纵显示层次结构，但这不是其中之一。

有关工作示例，请参阅 here...

【讨论】：

非常感谢您完美运行。我不知道这些差异，但我现在明白了。

【解决方案2】：

所以在创建您的 myShape 对象时为其添加名称，然后通过使用 getChildByName 方法进一步删除这个 myShape 可能很有用。

进行以下更改...

在创建 myShape 时...

var myShape:Shape = new Shape();
myShape.name = "myShape";
.
.
.
for (var i:Number = 0; i < graph.length-1; i++) 
{ 
    myShape.graphics.moveTo(550-i*50, (max – graph[i])*20); 
    myShape.graphics.lineTo(550-(i+1)*50, (max – graph[i+1])*20); 
    container.addChild(myShape); 
} 
this.addChild(container);

删除时...

while(this.getChildByName("myShape")!= null){
    this.removeChild(this.getChildByName("myShape"));
}

试试这个，效果很好……

【讨论】：

我试了一下，但它似乎仍然没有删除任何东西，它们仍然堆叠在一起。

【解决方案3】：

检查此代码...

在这段代码中，我直接在 UIcomponent 中添加了图形，这样可以正常工作...

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
                minWidth="955" minHeight="600" 
                creationComplete="application1_creationCompleteHandler(event)" >
    <mx:Script>
        <![CDATA[
            import flash.display.MovieClip;
            import flash.display.Shape;
            import flash.display.Sprite;

            import mx.core.UIComponent;
            import mx.events.FlexEvent; 


            private var _max:Number = 0; 
            private var _graph:Array = new Array(); 
            private var _container:UIComponent ;

            protected function application1_creationCompleteHandler(event:FlexEvent):void
            {

                _container = new UIComponent();
                this.addChild(_container);
                _container.graphics.lineStyle(2, 0x990000, 2);
                var redrawGraph = setInterval(reDraw,1000);
            }

            private function reDraw() 
            { 
                _graph.push(randomNum()); 
                _graph.reverse();
                _container.graphics.clear();
                _container.graphics.lineStyle(2, 0x990000, 2);
                for (var ints in _graph) 
                { 
                    if (_graph[ints] > _max) 
                    { 
                        _max = _graph[ints]; 
                    } 
                } 

                for (var i:Number = 0; i < _graph.length-1; i++) 
                { 
                    var a:Number = Number(_graph[i]);
                    var b:Number = Number(_graph[i+1]);
                    _container.graphics.moveTo(550-i*50,(_max-a) *20); 
                    _container.graphics.lineTo(550-(i+1)*50,( _max-b)*20);
                } 
                _graph.reverse(); 
            } 

            private function randomNum():int 
            { 
                return Math.floor(Math.random() * 11);
            } 
        ]]>
    </mx:Script>
</mx:Application>

【讨论】：