Рисование квадратов на Flex Canvas

Question

Я пытаюсь написать некоторый код для анимированных изображений квадратов на Flex Canvas. Что-то не так с моим кодом ниже, потому что он становится все медленнее. Я предполагаю, что я должен очистить старые квадраты или что-то в этом роде.

Что я делаю неправильно ниже ?:

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init();"> 
<mx:Script> 
<![CDATA[ 
public var ticker:Timer; 

    public function init():void { 

     ticker = new Timer(10); 

     // This implements the timerEvent 
     ticker.addEventListener(TimerEvent.TIMER, update); 
     ticker.start(); 

     draw(); 
    } 

    public function update(evt:TimerEvent):void { 
     draw(); 
    } 

    public function draw():void { 
     var squareSize:uint = 10; 
     var square:Shape = new Shape(); 

     square.graphics.beginFill(0xFFFFFF, 1.0); 
     square.graphics.drawRect(0, 0, myCanvas.width, myCanvas.height); 

     var i:int; 
     for (i = 0; i < myCanvas.height/squareSize; i++) { 
      var j:int; 
      for (j = 0; j < myCanvas.width/squareSize; j++) { 
       if (Math.random() < 0.5) { 
        square.graphics.beginFill(0x000000, 1.0); 
        square.graphics.drawRect(j * squareSize, i * squareSize, squareSize, squareSize); 
       } 
      } 
     } 

     square.graphics.endFill(); 
     myCanvas.rawChildren.addChild(square); 
    } 
]]> 
</mx:Script> 

    <mx:Panel title="Random Squares" height="95%" width="95%" 
     paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5"> 

     <mx:Canvas id="myCanvas" borderStyle="solid" height="100%" width="100%"> 
     </mx:Canvas> 

    </mx:Panel> 
</mx:Application> 

Answer 1

Вы хотите добавить неограниченное число детей в список отображения, так что вы определенно проблемы производительности.

Вы можете удалить старые формы перед добавлением нового

myCanvas.rawChildren.removeChildAt(0); 
myCanvas.rawChildren.addChild(square); 

Вы могли бы также сделать прочь с площади полностью - обратите внимание на Graphics.clear() вызов до рисования, хотя. В противном случае графический объект будет заполняться данными так же, как и список отображения.

public function draw():void { 
    var squareSize:uint = 10; 

    myCanvas.graphics.clear(); 
    myCanvas.graphics.beginFill(0xFFFFFF, 1.0); 
    myCanvas.graphics.drawRect(0, 0, myCanvas.width, myCanvas.height); 
    ... 
     myCanvas.graphics.beginFill(0x000000, 1.0); 
     myCanvas.graphics.drawRect(...) 
    ... 
    myCanvas.graphics.endFill(); 
}