在 Flex 4 中单击带有蒙版的 <s:Group> 时目标错误答案

【问题标题】：Wrong target when clicking on a <s:Group> with a Mask in Flex 4在 Flex 4 中单击带有蒙版的 <s:Group> 时目标错误
【发布时间】：2011-03-03 01:22:56
【问题描述】：

我在处理带有用于 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”，这是错误的。如果单击“图层”上超过 338 像素（蒙版大小）的任何位置，鼠标事件似乎不会到达图层对象。

如果我删除“层”上的“x”偏移，整个层会按预期工作，但是一旦我偏移，任何超过遮罩宽度 (338px) 的东西似乎都无法正确捕获，就像如果面具没有被抵消。奇怪的是，如果您在图像偏移后单击左侧，您会得到“管理器”，这意味着图层（和蒙版）确实被移动了。

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

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

对不起，我不能在这里嵌入图片，但我没有足够的声誉:(

【问题讨论】：

标签： apache-flex events actionscript mxml mask

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

【讨论】：