如何使用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>

我在這里上傳的image1和mask1文件：

image1- http://img853.imageshack.us/img853/923/image1yj.png

mask1- 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通道，但是您可以將可見內容渲染為Sprite，並將其用作任何DisplayObject上的蒙版。 使用這種方法，只有ping的可見區域會引起鼠標事件，並且應該尊重所有不透明性。 如果要分層，可能會遇到一些問題。

只要確保您使用Alpha通道掩蓋內容，而不使用特定的顏色通道即可。