Question

我正在尝试为图形文档编写基本代码，每次将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);`

}

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

任何帮助都将不胜感激。

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

Answer 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了解工作示例......

Answer 2

因此，在创建myShape对象时，为其添加名称，因此使用getChildByName方法可以进一步了解myShapes。

做一些以下更改......

创建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"));
}

试试这个，这样可以正常工作......

Answer 3

检查此代码......

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

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

Actionscript 3.0 - removeChild不起作用

3 个答案: