Flex Spark image Redimensionner pour ajuster récipient

Question

J'utilise le code suivant pour charger une image à l'écran:

<s:Scroller xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      width="100%" 
      height="100%"> 

    <s:VGroup width="100%" horizontalAlign="center" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" verticalAlign="top"> 
     <s:Label width="100%" text="Being Active" fontSize="14" fontFamily="Black"/> 
     <s:Image fillMode="scale" smooth="true" scaleMode="letterbox" verticalCenter="0" horizontalCenter="0" width="100%" source="@Embed('assets/img/q3/q3c1all.png')"/> 
     .... 
     .... 
    </s:VGroup> 

</s:Scroller> 

Dans l'image ci-joint, il a trois images 1. Vue constructeur 2. finales conception (ce que le concepteur attend) 3. résultat rendu (ce que les utilisateurs verront)

En raison de la boîte aux lettres scaleMode, il y a beaucoup d'espace au-dessus et au-dessous de l'image est masqué. Et cela éclate la couche. Est-ce que quelqu'un peut suggérer comment je peux faire le look out comme aperçu de conception (intitulé Exigence)

Comment mettre à l'échelle l'image proportionnellement sans déformer (comme c'est fait en CSS).

Answer 1

Pour ceux qui luttent avec cette question - la solution est d'utiliser ce qui vous donnera un contrôle total sur le bitmap. Une chose à noter est - si vous envisagez d'utiliser interaction/événements avec l'image, enveloppez-le dans un conteneur et ajoutez-y un événement click.

Je ne sais pas si c'est la meilleure solution, mais cela a fonctionné pour moi :)