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通道，但您可以将可见内容渲染为精灵，并将其用作任何DisplayObject上的遮罩。使用此方法，只有ping的可见区域将导致鼠标事件，并且它应该尊重所有不透明度。如果你正在分层，你可能会遇到一些问题。

请确保使用Alpha通道屏蔽内容，而不是特定的颜色通道。

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

1 个答案: