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

在＆lt; s：mask＆gt;内设置PNG使得阶段没有渲染，而在init（）方法中以编程方式添加掩码会导致正确的行为。

我花了很长时间来弄明白这一点，我想了解我在MXML方法中做错了什么，因为这似乎是在Cookbook中做的事情（除了我使用图像和使用Group wrapped BitmapImage的示例。）

由于

Answer 1

最终弄清楚... <mx:Image>中的<s:mask>需要包含在<s:Group>中（就像为BitmapImage指示的Cookbook中的原始代码一样）。我原本认为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>

将<mx：image>设置为<s：graphic>到<s：mask>的掩码不起作用。但是AS </s：mask> </s：graphic> </mx：image>

1 个答案: