单击时目标错误Flex 4 中带有面罩

Question

我在处理 Flex 4 中带有遮罩图像的组件上的 MouseEvent.MOUSE_DOWN 时遇到问题。

我有一个应用程序，如下所示：

<?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”上），您会看到单击的是“manager”而不是“layer”，这是错误的。如果您单击“图层”上超过 338px（蒙版大小）的任意位置，则鼠标事件似乎不会到达图层对象。

如果我删除“图层”上的“x”偏移，整个图层将按预期工作，但是一旦我偏移，任何超过蒙版宽度（338px）的内容似乎都无法正确捕获，就像蒙版不是' t 偏移量。奇怪的是，如果在图像偏移后单击图像的左侧，您会得到“管理器”，这意味着图层（和蒙版）确实被移动了。

这就是我的意思，没有偏移，单击绿色区域返回“图层”，单击蓝色区域返回“管理器”，这是预期的行为。 查看图像

如果我将图层偏移 220，这些区域的行为类似于 此图片

抱歉，我无法在此处嵌入图片，但我没有足够的声誉:(

Answer 1

想通了。

显然，问题在于用作蒙版的图像需要先添加到显示列表中，然后才能将其设置为蒙版，否则会发生这种不稳定的行为。这就是代码现在的样子并且它正在工作：

<?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 的子级>。将其设置为后者的子级会导致与以前相同的错误行为。