如何使用Flex图像忽略PNG透明区域上的鼠标操作？

Question

我做了一个简单的测试Air应用程序，尝试不同的方法来屏蔽或使用hitArea忽略PNG透明区域上的鼠标事件。似乎无法找到合适的组合来使其发挥作用，我也无法在网络上找到简洁的示例。

点击任何这些方法的透明区域不会导致点击被背景处理。

这里是我的代码：

<?xml version="1.0" encoding="utf-8"?> 
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx" 
        status="{clicked}"> 

<fx:Declarations> 
    <s:Image id="maskX" source="@Embed('mask1.png')" cacheAsBitmap="true"/> 
</fx:Declarations> 

<fx:Script> 
    <![CDATA[ 
     [Bindable] public var clicked:String = "none"; 

     protected function onClick(event:MouseEvent):void 
     { 
      clicked = event.currentTarget["id"] + "\t" + (new Date()).time; 
     } 
    ]]> 
</fx:Script> 

<!-- Some sort of background so I can see transparency working. --> 
<s:Group id="background" width="100%" height="100%" click="onClick(event)"> 
    <s:Rect width="100%" height="100%"> 
     <s:fill> 
      <s:LinearGradient rotation="90"> 
       <s:GradientEntry color="blue"/> 
       <s:GradientEntry color="white"/> 
      </s:LinearGradient> 
     </s:fill> 
    </s:Rect> 
</s:Group> 

<s:Group width="100%" height="100%"> 
    <s:layout> 
     <s:TileLayout/> 
    </s:layout> 

    <!-- Simple attempt at having Flex respect the alpha in the PNG itself as transparent 
      with regard to clicks --> 
    <s:Group id="image1" click="onClick(event)" mouseEnabledWhereTransparent="false"> 
     <s:Image source="@Embed('image1.png')" cacheAsBitmap="true"/> 
    </s:Group> 

    <!-- Use an explicit bitmap mask for the hitArea --> 
    <s:Group id="image2" click="onClick(event)" hitArea="{mask2}" mouseEnabledWhereTransparent="false"> 
     <s:Image source="@Embed('image1.png')"/> 
     <s:Image id="mask2" source="@Embed('mask1.png')" cacheAsBitmap="true"/> 
    </s:Group> 

    <!-- Try using just the mask bitmap --> 
    <s:Group id="image3" click="onClick(event)" hitArea="{mask3}" mouseEnabledWhereTransparent="false"> 
     <s:Image id="mask3" source="@Embed('mask1.png')" cacheAsBitmap="true"/> 
    </s:Group> 

    <!-- Specify the hitArea with alternate syntax --> 
    <s:Group id="image4" click="onClick(event)" mouseEnabledWhereTransparent="false"> 
     <s:Image source="@Embed('image1.png')"/> 
     <s:hitArea> 
      <s:Image id="mask4" source="@Embed('mask1.png')" cacheAsBitmap="true"/> 
     </s:hitArea> 
    </s:Group> 
</s:Group> 

的图像1和掩码1文件，我已经在这里上传：

图像1 - http://img853.imageshack.us/img853/923/image1yj.png

掩码1 - http://img715.imageshack.us/img715/3755/mask1.png

Answer 1

其实，这是可能的。这里是一个例子： http://www.webverwirklichung.com/en/blog/programming/flex/creating-hitarea-png-image-transparent-alpha-regions-flex

Flex不尊重PNG的alpha通道，但你可以将可见内容渲染成一个精灵，并将其用作任何DisplayObject上的掩码。使用这种方法，只有ping的可见区域会导致鼠标事件，并且它应该尊重所有不透明度。如果你正在分层的话，你可能会遇到一些问题。

只要确保您使用alpha通道掩盖内容，而不是特定的颜色通道。