カスタムFlex/ActionScript UIComponentは、サイズ変更中に塗りつぶしを何度も繰り返す

Question

カスタムUIコンポーネントを作成しました。ブラウザまたはその特定のコンテナのサイズが変更されると、再描画は行われますが、コンポーネントのコンテンツは何度も何度も... したがって、コンテナを移動すると、複数の円が上に描画されますが、再描画が行われるときのコンテナの位置に応じてオフセットされます。 私のupdateDisplayListコードは以下の通りです。 これはcontiuouslyこのように重複していないように明確にいくつかの並べ替えを行う必要がありますか？ ありがとうございました！

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void { 

      super.updateDisplayList(unscaledWidth, unscaledHeight);        

      trace("height: " + parent.height); 
      trace("width: " + parent.width); 

      if (parent.height <= parent.width) { 
       radius = Math.round((parent.height*.95)/2); 
      } 
      else { 
       radius = Math.round((parent.width*.95)/2); 
      } 

      trace("radius: " + radius); 

      outterRadius = Math.round(radius*.70); 
      innerRadius = Math.round(radius*.30); 

      trace("outterradius: " + outterRadius); 
      trace("innerradius: " + innerRadius); 

      centerX = this.width/2; 
      centerY = this.height/2; 

      trace("centerX: " + centerX); 
      trace("centerY: " + centerY); 

      var innerCircle:Sprite = new Sprite(); 
      var outterCircle:Sprite = new Sprite(); 
      var baseCircle:Sprite = new Sprite(); 

      baseCircle.graphics.beginFill(0x000000); 
      baseCircle.graphics.drawCircle(centerX, centerY, radius);    

      outterCircle.graphics.lineStyle(2, 0xA10303, .75); 
      outterCircle.graphics.drawCircle(centerX, centerY, outterRadius); 


      innerCircle.graphics.lineStyle(2, 0xA10303, .75); 
      innerCircle.graphics.drawCircle(centerX, centerY, innerRadius); 

      addChild(baseCircle); 
      addChild(outterCircle); 
      addChild(innerCircle); 

      for (var bubbleCount:int=0; bubbleCount < bubbleList.length; bubbleCount++) { 
       var globalPoint:Point = this.localToGlobal(getPointInCircle(radius)); 
       var radarBubble:RadarBubble = bubbleList.getItemAt(bubbleCount) as RadarBubble; 
       var bubbleLocalPoint:Point = radarBubble.globalToLocal(globalPoint); 
       radarBubble.x = bubbleLocalPoint.x; 
       radarBubble.y = bubbleLocalPoint.y; 
       trace("Add bubble: " + radarBubble.x + ", " + radarBubble.y + ", " + radarBubble.radius); 
       addChild(radarBubble);          
      }       

      // create radar display lines to be animated 
      for (var angleCount:int=0; angleCount < 360; angleCount++) { 
       var tmpLine3:Sprite = new Sprite(); 
       tmpLine3.graphics.lineStyle(2, 0xA10303, 1); 
       tmpLine3.graphics.moveTo(centerX, centerY);           
       tmpLine3.graphics.lineTo(getEndpoint(angleCount).x, getEndpoint(angleCount).y); 
       tmpLine3.visible = false; 
       addChild(tmpLine3); 
       lineCollection.addItemAt(tmpLine3, angleCount);        
      } 

     } 

Answer 1

Flex component lifecycleで読んでください。多くのことがinvalidateDisplayList（）を実行して、次のレンダリングイベント中にupdateDisplayListを再実行させることがあります。

私がここで見る問題は、毎回新しいbaseCircle、outerCircle、およびinnerCircleを作成することです。代わりに、各インスタンスの1つを作成し、updateDisplayList（）が実行されたときに更新する必要があります。

おそらく、現在のコンポーネントのinnerCircle、outerCircle、およびbaseCircle変数のインスタンスを作成しています。 createChildren（）では、それらを子コンポーネントとしてコンポーネントに追加できます。 updateDisplayListでは、関連する図面を実行できます。