Apache flex 如何构建比可见区域更大的高效按钮外观

我想做的是：构建一个超级简单的按钮皮肤（比如说，在向上状态时是一个小圆圈，在向上/向下状态时是一个稍大的圆圈），它有一个比可见区域更大的鼠标点击区域。换句话说，我希望按钮在处于向上状态时看起来像一个5x5的圆圈，但当鼠标位于该圆圈周围15x15像素的区域时，会转换为过度状态，以便更轻松地单击按钮

我过去所做的是在可见椭圆后面使用一个透明椭圆。这很好地工作，但看起来像是在浪费内存（不是很多，不过如果你开始有很多这样的按钮，它会累加起来）和渲染周期（透明度）。我想我可以通过将椭圆包装在一个给定大小的组中并聆听它的鼠标事件来避免这种情况，但不知何故，似乎没有鼠标事件在这样的组中触发-不知道为什么

我想我很想知道是否有人知道一个有效的方法来做到这一点。我也很想知道为什么这样一个团体不会发起鼠标事件，但我想这是次要的。下面是简单的代码片段：

申请书：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <s:Button x="100" y="100" skinClass="mySkin"/>
</s:Application>

按钮皮肤：

<?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">

    <fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata>
    <fx:Script>
        <![CDATA[
            import mx.states.OverrideBase;


            protected function group1_rollOverHandler(event:MouseEvent):void
            {
                trace("roll over");
            }

        ]]>
    </fx:Script>
    <s:states>
        <s:State name="up"/>
        <s:State name="over"/>
        <s:State name="down"/>
        <s:State name="disabled"/>
    </s:states>
    <s:Group width="15" height="15" rollOver="group1_rollOverHandler(event)">
        <s:Ellipse height.up="5" height="12" width="12" width.up="5" 
                   x="0" y="0" x.up="3" y.up="3">
            <s:fill>
                <s:SolidColor color="0x222222"/>
            </s:fill>
        </s:Ellipse>
    </s:Group>
</s:SparkSkin>

[主机组件（“spark.components.Button”）]

我不会担心

SparkSkin

里面的

椭圆的记忆。如果您非常关心内存，您可能希望滚动自己的
按钮

但是，有几个非常小的性能增强不会影响实现：

使用
Skin
而不是
SparkSkin
。它很轻
对HIT区域使用
Rect
。它比椭圆更轻
酷-谢谢！有没有想过为什么鼠标事件不会触发？没有很好的文档记录，但是命中测试是针对对象的图形而不是对象的属性（高度、宽度等）进行的。这就是为什么当你检查许多SkinClass时，它们有一个不可见的rect，带有id/comment
hitarea