Неправильная цель при нажатии на <s: Group> с маской в ​​Flex 4 - PullRequest
0 голосов
/ 03 марта 2011

У меня проблемы с обработкой MouseEvent.MOUSE_DOWN для компонента с изображением для маски в 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"
  creationComplete="init()"
  >
  <fx:Script>
  <![CDATA[
  import spark.core.MaskType;

  public function init():void {

    manager.addEventListener( MouseEvent.MOUSE_DOWN, handleMouseDown );
  }

  public function handleMouseDown(e:MouseEvent):void {
    trace( e.target )
  }

  ]]>
  </fx:Script>

  <s:Group id="manager" width="500" height="500">
    <s:Group id="layer" mouseChildren="false" x="220">
      <s:Group id="content" maskType="{MaskType.ALPHA}" cacheAsBitmap="true">
        <s:Rect width="338" height="162">
          <s:fill>
            <s:SolidColor color="0xDDAAAA" />
          </s:fill>
        </s:Rect>
        <s:mask>
          <s:Group>
            <mx:Image 
              source="http://www.wpclipart.com/signs_symbol/alphabets_numbers/3D_text_T.png"
              cacheAsBitmap="true" 
              />
          </s:Group>
        </s:mask>
      </s:Group>
    </s:Group>
  </s:Group>
</s:Application>

Если вы запустите это, вы заметите, что если вы щелкнете по левой стороне изображения (на «3»), трассировка правильно будет указывать, что «слой» был нажат. Однако, если вы нажмете на правой стороне изображения (на «D»), вы увидите, что вместо «слоя» щелкнули «менеджер», что неправильно. Если вы щелкнете где-нибудь на «слое», который превышает 338 пикселей (размер маски), событие мыши, по-видимому, не достигнет объекта слоя.

Если я удаляю смещение «x» на «layer», весь слой работает как положено, но как только я смещу, все, что находится за пределами ширины маски (338px), кажется, не будет зафиксировано должным образом, как если бы маска не была смещена. Странно то, что если вы щелкнете слева от изображения после его смещения, вы получите «manager», что означает, что слой (и маска) действительно были перемещены.

Вот что я имею в виду, без смещения, нажатие на зеленую область возвращает «слой», нажатие на синюю область возвращает «менеджер», что является ожидаемым поведением. См. Изображение

Если я смещу слой на 220, области ведут себя как это изображение

Извините, я не могу встроить изображения сюда, но мне не хватает репутации: (

1 Ответ

0 голосов
/ 04 марта 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 {

    manager.addEventListener( MouseEvent.MOUSE_DOWN, handleMouseDown );
  }

  public function handleMouseDown(e:MouseEvent):void {
    trace( e.target.id )
  }

  ]]>
  </fx:Script>

  <s:Group id="manager" width="500" height="500">
    <s:Group id="layer" mouseChildren="false" x="100" mouseEnabledWhereTransparent="false">
      <s:Group id="content" mask="{maskImage}" maskType="{MaskType.ALPHA}" cacheAsBitmap="true">
        <s:Rect width="338" height="162">
          <s:fill>
            <s:SolidColor color="0xDDAAAA" />
          </s:fill>
        </s:Rect>
      </s:Group>
      <mx:Image id="maskImage"
        source="http://www.wpclipart.com/signs_symbol/alphabets_numbers/3D_text_T.png"
        cacheAsBitmap="true" 
        />
    </s:Group>
  </s:Group>
</s:Application>

Также следует отметить, что maskImage является дочерним элементом layer, а не дочерним элементом content.Установка его в качестве дочернего по отношению к последнему приводит к тому же некорректному поведению, что и раньше.

...