Personnalisation de Flex/ActionScript UIComponent permet de peindre plusieurs fois pendant un redimensionnement

Question

J'ai créé un composant personnalisé et chaque fois que le navigateur ou son conteneur spécifique est redimensionné, un repeint se produit mais le contenu du composant est de nouveau dessiné et encore et encore ... Donc, si je déplace le conteneur, je finirai avec plusieurs cercles dessinés les uns au-dessus des autres, mais décalés en fonction de l'endroit où se trouve le conteneur au moment du repeint. Mon code updateDisplayList est ci-dessous. Ai-je besoin de faire une sorte de clair pour qu'il ne soit pas dupliqué comme ça ??? Merci beaucoup pour toute aide!

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

Lire sur le Flex component lifecycle. Un grand nombre de choses peuvent exécuter invalidateDisplayList() provoquant ainsi la ré-exécution de updateDisplayList lors de l'événement de rendu suivant.

Le problème que je vois ici est que vous créez de nouveaux baseCircle, outerCircle et innerCircle à chaque fois. Au contraire, vous devriez en créer un de chaque instance et le mettre à jour quand updateDisplayList() s'exécutera.

Je créerais probablement vos instances de variables innerCircle, outerCircle et baseCircle sur le composant en cours. Dans createChildren(), vous pouvez les ajouter en tant qu'enfants sur le composant. Dans updateDisplayList vous pouvez faire le dessin correspondant.