Question

我正在尝试做的事情：构建一个超级简单的按钮皮肤（当处于向上状态时为小圆圈，在处于上/下状态时为稍大的圆圈），其具有比可见区域更大的鼠标命中区域。换句话说，我希望按钮在处于启动状态时看起来像5x5圆圈，但当鼠标位于这样的圆周围的15x15像素区域时，转换到过度状态 - 以便更轻松地点击按钮。 / p>

我过去所做的是在可见椭圆后面使用透明椭圆。这很好用，但似乎浪费了内存（不多，虽然如果你开始有很多这些按钮，它会增加）和渲染周期（透明度）。我认为我可以通过将椭圆包装在具有给定大小的组中并且听取它的鼠标事件来避免这种情况，但不知何故似乎没有鼠标事件在这样的组上发射 - 不确定原因。

我想我很想知道是否有人知道这样做的有效方法。也很想知道为什么这样的小组不会发动鼠标事件，但我猜这是次要的。下面是简单的代码段：

申请表：

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

Answer 1

我不担心Ellipse内SparkSkin的记忆。如果你担心记忆，你会想要推出自己的Button

但是，有一些非常小的性能增强功能不会影响实现：

使用Skin代替SparkSkin。重量更轻。
使用Rect作为hitarea。它比Ellipse

如何构建具有比可见区域更大的hitareas的高效按钮外观

1 个答案: