Comment faire l'échelle du chemin vers le conteneur dans Flex (View Box)?

Question

J'ai le balisage suivant:

<s:Group width="100%" height="100%"> 
    <s:BorderContainer borderWeight="3" borderColor="black" cornerRadius="5" width="100%" height="100%"> 
     <s:Path> 
      <s:stroke> 
       <s:SolidColorStroke color="black" /> 
      </s:stroke> 
      <s:data>M 14.153 14.788 C 13.856 15.25 13.161 15.628 12.612 15.628 L 0.766 15.628 C 0.216 15.628 -0.028 15.228 0.225 14.739 L 3.307 8.765 C 3.56 8.276 3.56 7.477 3.307 6.988 L 0.225 1.014 C -0.028 0.525 0.216 0.125 0.766 0.125 L 12.612 0.125 C 13.161 0.125 13.856 0.503 14.153 0.965 L 18.07 7.036 C 18.367 7.499 18.367 8.254 18.07 8.717 L 14.153 14.788 Z</s:data> 
     </s:Path> 
    </s:BorderContainer> 
</s:Group> 

Je veux que le chemin dans ce conteneur pour redimensionner en fonction du récipient. Dans SVG et Silverlight, il y a le concept de "ViewBox" mais je ne trouve pas ce concept dans Flex.

Régler la largeur et la hauteur sur 100% des travaux, mais cela demande beaucoup de bricolage lorsque vous avez beaucoup de chemins. De plus, il ne se comporte pas exactement comme vous le souhaitez (essayez-le et redimensionnez votre navigateur)

Answer 1

J'ai trouvé ce que je cherchais. AutoFitArea fait exactement ce que je veux:

http://www.greensock.com/autofitarea/

Answer 2

Vous souhaitez mettre à l'échelle un chemin avec un rapport d'aspect constant? J'ai réussi à le faire comme ceci:

<s:BorderContainer id="container" 
    borderWeight="3" borderColor="black" cornerRadius="5" 
    width="100%" height="100%"> 
    <s:Path 
     width="{Math.min(container.width - 10, container.height - 10)}" 
     height="{Math.min(container.width - 10, container.height - 10)}"> 

Il est encore plus bricoler, mais il est possible de lier des propriétés à une telle fonction dans l'exécution.

Edit:

Je ne veux pas l'aspect constant rapport . Je veux qu'il se développe avec le conteneur .

Ensuite, vous pouvez écrire quelque chose comme ça (pas exactement testé):

for each (var child:DisplayObject in container.children) { 
    if (child is Path) { 
     child.percentWidth = child.percentHeight = 100; 
    } 
} 

exécuter sur init application et les chemins seront mis à l'échelle à conteneurs (mais pas en mode de conception).

Answer 3

Vous pouvez envelopper le chemin dans s: Groupe et définir le resizeMode (Pour votre information, on obtient ainsi le même que l'emballage juste le chemin s: graphique) :

<s:BorderContainer borderWeight="1" borderColor="black" cornerRadius="5" width="100%" height="100%" > 
     <s:Group width="100%" height="100%" resizeMode="scale"> 
      <s:Path> 
       <s:stroke> 
        <s:SolidColorStroke color="black" scaleMode="none" /> 
       </s:stroke> 
       <s:data>M 14.153 14.788 C 13.856 15.25 13.161 15.628 12.612 15.628 L 0.766 15.628 C 0.216 15.628 -0.028 15.228 0.225 14.739 L 3.307 8.765 C 3.56 8.276 3.56 7.477 3.307 6.988 L 0.225 1.014 C -0.028 0.525 0.216 0.125 0.766 0.125 L 12.612 0.125 C 13.161 0.125 13.856 0.503 14.153 0.965 L 18.07 7.036 C 18.367 7.499 18.367 8.254 18.07 8.717 L 14.153 14.788 Z</s:data> 
      </s:Path> 
     </s:Group> 
    </s:BorderContainer> 

Le scaleMode du trait maintiendra le poids de la ligne à cocher si c'est ce que vous cherchez. Je ne suis pas sûr pourquoi le chemin montre toujours un peu de rembourrage sur le droit et le fond, mais c'est un peu moins indiscipliné comme réglage de la largeur de chemin & hauteur à 100%. Peut vouloir vérifier les données de chemin.