Dessiner une superposition dans un composant flex personnalisé

Question

Comment créer un composant MXML personnalisé dans flex qui est basé sur un composant existant mais dessine une superposition sur ce composant existant dans certaines situations.

Idéalement, le nouveau composant doit être basé sur (dériver de) le composant sortant afin que les occurrences du composant existant puissent être simplement permutées avec le nouveau.

J'ai essayé de surcharger updateDisplayList() dans le nouveau composant et de peindre la superposition en utilisant this.graphics. Cela a entraîné la superposition sous les enfants du composant existant. J'ai également essayé de faire le dessin en recevant un rendu-événement qui a conduit à des résultats similaires.

Lorsque la condition externe qui doit déclencher l'affichage de l'overlay change, j'appelle invalidateDisplayList() sur mon nouveau composant. Cela fonctionne pour déclencher le dessin pour les deux cas décrits ci-dessus. Le problème restant semble être de savoir comment dessiner au-dessus de tous les autres composants une fois qu'ils sont ajoutés.

L'exemple suivant devrait illustrer ce que j'ai essayé de faire; quand overlayEnabled a été fixé et a été appelé du composant méthode invalidateDisplayList(), le rectangle rouge peint se serait en arrière-plan ....

// NewComponent.mxml 
<ExistingComponent ...> 
    <mx:Script> 
    ... 

     public var overlayEnabled:Boolean; 

     override protected updateDisplayList(...) { 
      super.updateDisplayList(...) 
      if (overlayEnabled) { 
       var g:Graphics = this.graphics;  
       g.beginFill(0xFF0000, 0.5); 
       g.drawRect(0, 0, width, height); 
       g.endFill(); 
      } 
     } 
    ... 
    </mx:Script> 
</ExistingComponent> 

Aussi, ne hésitez pas à suggérer des approches différentes.

Answer 1

Vous devrez ajouter un DisplayObject pour vous superposer et assurer lorsque vous appelez updateDisplayList qu'il est placé au-dessus de l'autre.

 public var overlayEnabled:Boolean; 

     public overlayHolder:(whatever display object you want to use) 

     override protected updateDisplayList(...) { 
      super.updateDisplayList(...) 
      if (overlayEnabled) { 
       if (overlayHolder.parent != this){ 
       addChild(overlayHolder); 
       } else { 
        if (numChildren > 0) 
        setChildIndex(overlayHolder, numChildren-1); 
       } 
       var g:Graphics = overlayHolder.graphics;  
       g.beginFill(0xFF0000, 0.5); 
       g.drawRect(0, 0, width, height); 
       g.endFill(); 
      } else if (overlayHolder.parent == this) { 
       removeChild(overlayHolder); 
      } 
     } 

Edit: Une propriété que vous pouvez utiliser pour ajouter votre superposition à la liste d'affichage peut être le rawchildren:

package { 
    import flash.display.Graphics; 
    import flash.display.Sprite; 

    import mx.containers.VBox; 

    public class MyVBox extends VBox { 
     public var overlayEnabled : Boolean = true; 
     public var overlay : Sprite = new Sprite(); 

     public function MyVBox() { 
      super(); 
     } 

     protected override function updateDisplayList(unscaledWidth : Number, unscaledHeight : Number) : void { 
      super.updateDisplayList(unscaledWidth, unscaledHeight); 
      if (overlayEnabled) { 
       if (overlay.parent != this) { 
        rawChildren.addChild(overlay); 
       } else { 
        if (rawChildren.numChildren > 0) 
         rawChildren.setChildIndex(overlay, rawChildren.numChildren - 1); 
       } 
       var g : Graphics = overlay.graphics; 
       g.beginFill(0xFF0000, 0.5); 
       g.drawRect(0, 0, width, height); 
       g.endFill(); 
      } else if (overlay.parent == this) { 
       rawChildren.removeChild(overlay); 
      } 
     } 
    } 
}