How do I make the path scale to the container in Flex (View Box)?

I have the following markup:

<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>

I want the path in this container to resize based on the container. In SVG and Silverlight, there is the concept of "ViewBox" but I can't find that concept in Flex.

Setting the width and height to 100% kind of works, but it requires a lot of tinkering when you have a lot of paths. Plus, it doesn't behave exactly like you would want (try it out and resize your browser)

Answers


You want to scale path with constant aspect ratio? I managed to do it like this:

<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)}">

It's even more tinkering, but its possible to bind properties to such a function in runtime.

Edit:

I don't want the constant aspect ratio. I want it to grow with the container.

Then you can write something like this (not exactly tested):

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

Run this on application init and paths will be scaled to container (but not in design mode).


I found what I was looking for. AutoFitArea does exactly what I want:

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


You can wrap the path in s:Group and set the resizeMode (FYI, this achieves the same as just wrapping the path in s:Graphic):

<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>

The scaleMode on the stroke will keep the line weight in check if that's what you're looking for.

I'm not sure why the path is still showing some padding on the right and bottom but it's a little less unruly as setting the path width & height to 100%. Might want to double check the path data.


Need Your Help

How to validate signature/consumer secret

php oauth

I'm creating my own "Oauth service provider 'system'" and I have a doubt..

Lowercase characters to Uppercase characters in C & writing to file

c character uppercase lowercase

I am reading content from a file to be read into a char array in C. How could I change all the letters in the file that are lowercase to uppercase letters?

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.