將<mx:Image>設置爲<s:Graphic>到<s:mask>的掩碼不起作用。但AS的確如此

Question

我在設置一個Graphic對象（一個實心填充的矩形）時遇到了麻煩，該圖像在運行時被加載。我已經成功地得到它用下面的代碼工作：

<?xml version="1.0"?> 
<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="init()" 
> 
    <fx:Script> 
    <![CDATA[ 
import spark.core.MaskType; 

public function init():void { 
     rect.mask = circle; 
} 
    ]]> 
    </fx:Script> 

    <s:Graphic id="rect" maskType="{MaskType.ALPHA}" cacheAsBitmap="true"> 
    <s:Rect width="500" height="500"> 
     <s:fill> 
     <s:SolidColor color="0xDDAAAA" /> 
     </s:fill> 
    </s:Rect> 
    </s:Graphic> 
    <mx:Image 
    id="circle" 
    source="http://example.com/someimage.png" cacheAsBitmap="true" /> 

</s:Application> 

我不明白的是爲什麼它不與這個其他片段中，來自O'Reilly的Flex 4的食譜稍加修改的工作（​​）：

<?xml version="1.0"?> 
<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" 
> 
    <fx:Script> 
    <![CDATA[ 
import spark.core.MaskType; 

    ]]> 
    </fx:Script> 

    <s:Graphic id="rect" maskType="{MaskType.ALPHA}" cacheAsBitmap="true"> 
    <s:Rect width="500" height="500"> 
     <s:fill> 
     <s:SolidColor color="0xDDAAAA" /> 
     </s:fill> 
    </s:Rect> 
    <s:mask> 
     <mx:Image 
     id="circle" 
     source="http://example.com/someimage.png" cacheAsBitmap="true" /> 
    </s:mask> 
    </s:Graphic> 
</s:Application> 

設置PNG的<的內線：面膜>使舞臺呈現什麼都沒有，而在init編程加入面膜（）方法會導致正確的行爲。

我花了相當長的一段時間才弄清楚了這一點，我想了解我在MXML方法中做錯了什麼，因爲這似乎是食譜中正在做的事情（除了我使用圖像和示例使用組包裝BitmapImage）。

由於

Answer 1

想通了最後...在<s:mask>的<mx:Image>需要在<s:Group>被包裹（如原碼從食譜指示的的BitmapImage）。我本來以爲圖像並不需要，因爲什麼是前面提到的組標籤：

同樣，任何基於的DisplayObject元素，包括來自MX集的視覺元素，可以作爲一個面具源應用圖形元素。

最終的代碼如下所示：

<?xml version="1.0"?> 
<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" 
    > 
    <fx:Script> 
    <![CDATA[ 
    import spark.core.MaskType; 
    ]]> 
    </fx:Script> 

    <s:Graphic id="rect" maskType="{MaskType.ALPHA}" cacheAsBitmap="true"> 
    <s:Rect width="200" height="200"> 
     <s:fill> 
     <s:SolidColor color="0xDDAAAA" /> 
     </s:fill> 
    </s:Rect> 
    <s:mask> 
     <s:Group> 
     <mx:Image 
      id="circle" 
      source="http://example.com/triangle.png" cacheAsBitmap="true" /> 
     </s:Group> 
    </s:mask> 
    </s:Graphic> 
</s:Application>