设置作为上的遮罩通过不起作用。但AS确实

Question

我在设置要使用运行时加载的图像进行屏蔽的图形对象（实心填充矩形）时遇到问题。我已经设法让它与以下代码一起工作：

<?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 Cookbook 稍作修改的（第 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 ;s:掩码>使舞台不渲染任何内容，而在 init() 方法中以编程方式添加遮罩会导致正确的行为。

我花了很长时间才弄清楚这一点，我想了解我在 MXML 方法中做错了什么，因为这似乎是 Cookbook 中正在做的事情（除了我使用 Image以及使用 Group 包装的 BitmapImage 的示例）。

谢谢

Answer 1

终于弄清楚了... 中的 需要包装在 中;（如 Cookbook 中为 BitmapImage 指示的原始代码）。我最初认为 Image 不需要 Group 标签，因为前面提到过：

同样，任何基于 DisplayObject 的元素（包括 MX 集中的视觉元素）都可以用作 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"
  >
  <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>