Установка <mx: Image> в качестве маски для <s: Graphic> через <s: mask> не работает. но как делает - PullRequest
Новая
       30

Установка <mx: Image> в качестве маски для <s: Graphic> через <s: mask> не работает. но как делает

1 голос
/ 22 февраля 2011

У меня проблемы с настройкой графического объекта (прямоугольник со сплошной заливкой) для маскирования изображения, которое загружается во время выполнения. Мне удалось заставить его работать со следующим кодом: 

<?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 ( Глава 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).

Спасибо

1 Ответ

1 голос
/ 03 марта 2011

Наконец-то разобрался ... <mx:Image> в <s:mask> нужно обернуть в <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>
...