flex s:path with relative size

Question

This should be easy but I can't figure out how to scale a path relative to its parent container with Flex Path primitive. Let's suppose I have a 20x20 pixel button, and in the Skin the following graphic elements (a simple Triangle for the example):

    <s:Path
        data="M 0 20 L 0 0 L 20 0 L 0 20"
        width="100%" height="100%">
        <s:stroke>
            <s:SolidColorStroke color="0x00000" weight="1"/>
        </s:stroke>
    </s:Path>

The path use 0 and 20 so that the triange is the full size of the button. I would like the Path is always 100% the size of the button: for example if the button is 40x20, the path should be scaled accordingly.

Path data property does not accept percent value. How can I specify the "20" in the path data is the container width or height ?

Answer 1

Look at this:

Here is my MXML:

<s:Button label="Hello" width="70" height="40" skinClass="assets.skin.MySkin"/>
<s:Button label="Hello" width="170" height="40" skinClass="assets.skin.MySkin"/>
<s:Button label="Hello2" width="170" height="270" skinClass="assets.skin.MySkin2"/>

The only difference between two skins are "width" and "height" of the "s:Graphic" tag:

//MySkin.mxml

...
<s:Graphic>
    <s:Path data="M 0 20 L 0 0 L 20 0 L 0 20">
        <s:stroke>
            <s:SolidColorStroke color="0x00000" weight="1"/>
        </s:stroke>
    </s:Path>
</s:Graphic>
...

//MySkin2.mxml

...
<s:Graphic width="100%" height="100%">
    <s:Path data="M 0 20 L 0 0 L 20 0 L 0 20">
        <s:stroke>
            <s:SolidColorStroke color="0x00000" weight="1"/>
        </s:stroke>
    </s:Path>
</s:Graphic>
...