如何将遮罩切换到 Flex 中的组（适用于 BorderContainer）

Question

这是我的测试应用程序：

<?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:Group 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>

我希望在选中复选框时应用掩码，在未选中复选框时将其删除。但这似乎不起作用。

然而，当你更改为 时，它就像一个魅力。谁能向我解释为什么？

注意：在我的实际应用程序中，我将其应用到一个扩展 SkinnableComponent 的组件的皮肤中，该组件不能使用 BorderContainer，因此解决方案会很好。

Answer 1

在该组的 mask 属性的文档中说道：
“设置蒙版。该蒙版将被添加到显示列表中。该蒙版不得已位于显示列表中或元素数组中。”

尝试将您的蒙版移至，它应该可以正常工作。

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

希望这有帮助。

火焰