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

Question

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)

alxx · Answer 1 · 2010-11-06T10:08:09.490

0

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

edited Nov 06 '10 at 10:08

answered Nov 04 '10 at 18:51

alxx

9,897
4
26
41

ughhhh... this won't do (not your fault). I can't do this for every path my designer throws at me (hundreds). I think I need to figure out how to implement a ViewBox. – Brian Genisio Nov 06 '10 at 00:50
Looking at this further, this is not what I want. I don't want the constant aspect ratio. I want it to grow with the container. I want resolution independent views, which requires my paths to grow or shrink based on the container shape. – Brian Genisio Nov 06 '10 at 02:25
I see that you updated your answer to reflect my comment, but I don't think you understand what I want. I don't want every path to spread to 100%. I want it to grow proportionately with the container. If a path is taking up 20% of a container, and I grow the container by 100%, that path should still take up 20% of the container, but grew by 2x pixels. That is what a ViewBox is. I am pretty sure this doesn't exist in Flex. – Brian Genisio Nov 16 '10 at 04:24

score 0 · Accepted Answer · answered Mar 30 '11 at 11:07

0

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

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

answered Mar 30 '11 at 11:07

Brian Genisio

47,787
16
124
167

score 0 · Answer 3 · answered Mar 20 '12 at 20:56

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.

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

3 Answers3

Linked