0

我正在尝试为每次将 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);`

}

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

任何帮助，将不胜感激。

（对不起格式......它不能正常工作

4

3 回答 3

1

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

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

在reDraw回调中，您正在使用graphics.moveToandgraphics.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);

        }
    }

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

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

有关工作示例，请参见此处...

于 2012-04-17T13:06:37.307 回答
0

因此，在创建您的 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"));
}

试试这个，这会很好用......

于 2012-04-17T05:56:27.257 回答
0

检查此代码...

在这段代码中，我直接在 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>
于 2012-04-17T11:21:06.130 回答