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)

回答1:

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

回答2:

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

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

回答3:

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.

来源：https://stackoverflow.com/questions/4089927/how-do-i-make-the-path-scale-to-the-container-in-flex-view-box

标签

apache-flex

viewbox