通过 <s:mask> 将 <mx:Image> 设置为 <s:Graphic> 上的掩码不起作用。但 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>

我不明白为什么它不适用于其他 sn-p，根据 O'Reilly Flex 4 Cookbook (Chapter 4 - Apply Bitmap Data to a Graphic Element as a Mask) 稍作修改：

<?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 方法中做错了什么，因为这似乎是 Cookbook 中正在做的事情（除了我使用 Image 和使用 Group 包装的 BitmapImage 的示例）。

谢谢

Answer 1

终于想通了...<s:mask> 中的<mx:Image> 需要包装在<s:Group> 中（就像食谱中为 BitmapImage 指示的原始代码一样）。由于前面提到的，我最初认为 Image 不需要 Group 标签：

同样，任何基于 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>