Étendre l'image sur plusieurs composants dans Flex

Question

Récemment, j'ai trouvé un bel outil de création de diagrammes en ligne - LovelyCharts. J'aime la façon dont l'interface utilisateur est conçue - vous pouvez voir la capture d'écran here. Je me demande comment créer une image couvrant plusieurs composants, comme le logo LovelyCharts dans le coin supérieur droit de la capture d'écran. Quelqu'un pourrait-il me donner un coup de pied dans la bonne direction?

Answer 1

Vous devez créer une image avec un arrière-plan transparent. Le format JPEG ne prend pas en charge les arrière-plans transparents, vous devez donc utiliser GIF ou un autre format. Puis incorporez l'image comme dans le code suivant.

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
       layout="vertical"> 
    <mx:Canvas width="476" 
       height="264"> 
     <mx:Label x="103" 
        y="110" 
        text="Some text" 
        width="155"/> 
     <mx:Image x="115" 
        y="110" 
        width="100" 
        height="100" 
        source="@Embed('assets/transparent_back.gif')"/> 
    </mx:Canvas> 

Vous pouvez positionner l'image où vous voulez sur la toile, qui se chevauchent d'autres composants si vous le souhaitez. Voici un exemple d'une image avec un fond transparent, http://commons.wikimedia.org/wiki/File:Gluecksklee_%28transparent_background%29.gif

Answer 2

Cela devrait certainement fonctionner pour vous. La disposition de l'application est absolue et il y a deux exemples d'images - une déclarée à l'intérieur des balises canvas et l'autre à l'extérieur

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
       layout="absolute"> 
    <mx:Canvas width="476" 
       height="264" 
       x="50" 
       y="0" 
       borderStyle="solid" 
       borderThickness="5" 
       borderColor="black"> 
     <mx:Label x="103" 
        y="110" 
        text="Some text" 
        width="155"/> 
     <mx:Image x="115" 
        y="110" 
        width="100" 
        height="100" 
        source="@Embed('assets/transparent_back.gif')"/> 
    </mx:Canvas> 
    <mx:Image x="30" 
       y="110" 
       width="100" 
       height="100" 
       source="@Embed('assets/transparent_back.gif')"/> 

</mx:Application>