mouseEnabledWhereTransparent 未按预期工作

Question

我只是不明白为什么 mouseEnabledWhereTransparent 不适用于此皮肤。

它创建的皮肤基本上是一个具有透明背景和左侧小三角形的按钮，如下所示： >ButtonText 但三角形周围的空白区域不会接收鼠标事件。

我尝试将另一个组包裹在三角形路径周围，并尝试将其包裹到图形对象中，但也没有成功。我可以创建一个 alpha 值低于所有内容的 矩形，但这不正是 mouseEnabledWhereTransparent 应该为我做的吗？

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minWidth="21" minHeight="21" alpha.disabled="0.5"
             mouseEnabledWhereTransparent="true">

    <!-- host component -->
    <fx:Metadata>
        <![CDATA[ 
        [HostComponent("spark.components.Button")]
        ]]>
    </fx:Metadata>

    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>

    <!-- triangle tip -->
    <s:Path data="M 0 0 L 0 14 L 10 7 L 0 0" bottom="5">
        <s:fill>
            <s:SolidColor color="0xFFFFFF" />
        </s:fill>
    </s:Path>


    <!-- text -->
    <s:Label id="labelDisplay"
                 textAlign="center"
                 verticalAlign="bottom"
                 maxDisplayedLines="1" 
                 left="14" right="10" top="2" bottom="2" color="0x000000" fontSize="14">
    </s:Label>
</s:SparkSkin>

Answer 1

哟，您需要的是在该路径之前添加一个矩形作为点击区域，这可以工作：

<s:Rect left="0" right="0" top="0" bottom="0" >
    <s:fill>
        <s:SolidColor alpha="0" />
    </s:fill>
</s:Rect>

这个家伙 这里有一个制作自定义按钮的好例子（减去标签）

Answer 2

如果设置的组上没有鼠标事件侦听器，则 mouseEnabledWhereTransparent 无效。在您的示例中，Button 对象有一个单击事件侦听器，但 Button 的外观对象 (SparkSkin) 没有。

来自 GroupBase.mouseEnabledWhereTransparent 的 ASDoc：

“仅当将鼠标、触摸或 Flash 播放器手势事件添加到此实例时，此属性才会生效。”

解决方法是向皮肤添加一个不执行任何操作的鼠标事件侦听器，例如：

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
             mouseEnabledWhereTransparent="true" click="doNothing()">
    <fx:Script>
        <![CDATA[
            protected function doNothing():void {
                trace('doNothing');
            }
        ]]>
    </fx:Script>
    ...
</s:SparkSkin>

此属性的主要用例是将单击事件直接添加到组，但考虑一下很有趣你提出的案例。按照“如果主机组件附加了鼠标侦听器，在皮肤上设置 mouseEnabledWhereTransparent 应该会产生效果”这样的方式提交增强请求可能是合理的。