如何使用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通道掩蓋內容，而不是特定的顏色通道。