how to toggle a mask to a group in Flex (works for BorderContainer)

Here's my test application:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" 
               creationComplete="initApp()"
               width="800" height="800">

    <fx:Script>
        <![CDATA[
            protected function initApp():void {
                spe.graphics.clear();
                spe.graphics.lineStyle(1,0xff9900);
                spe.graphics.beginFill(0xff9900,0.5);
                spe.graphics.drawRect(-50,-75,100,100);
            }
        ]]>
    </fx:Script>

    <s:CheckBox id="showMask" label="Show Mask"/>
    <s:Gr开发者_JS百科oup id="graphArea" width="500"  height="500"
             horizontalCenter="0" verticalCenter="0"
             mask="{(showMask.selected) ? maskCanvas : null}">
        <s:SpriteVisualElement id="spe"/>
        <s:SkinnableContainer id="maskCanvas" alpha="0" width="100%" height="100%"/>
    </s:Group>
</s:Application>

I would expect the mask to be applied when the checkbox is selected, and removed when it issin't. But it doesn't seem to work.

However, when you change to , it works like a charm. Can anyone explain to me why?

Note: In my actual application, i'm applying this in a skin to a component that is extending SkinnableComponent which can't use BorderContainer so a solution to this would be great.

In the documentation for the mask property of the Group it is said: "Sets the mask. The mask will be added to the display list. The mask must not already on a display list nor in the elements array."

Try to move your mask to and it should work properly.

<fx:Declarations>
    <s:SkinnableContainer id="maskCanvas" 
                       x="{spe.x}"
                       y="{spe.y}"
                       width="40" height="40"
                       alpha="0"
                       backgroundColor="white"
                       />
</fx:Declarations>

<s:CheckBox id="showMask" label="Show Mask"/>

<s:Group id="graphArea" width="500"  height="500"
         horizontalCenter="0" verticalCenter="0"
         mask="{(showMask.selected) ? maskCanvas : null}">
    <s:SpriteVisualElement id="spe"/>
</s:Group>

Hope this helps.

Blaze