То, что я пытаюсь сделать: создать супер простой скин кнопки (скажем, маленький круг, когда он в верхнем состоянии, немного больший круг, когда он находится в состоянии «вверх / вниз»), у которого область удара мыши больше, чем в видимой области. Другими словами, я бы хотел, чтобы кнопка выглядела как круг 5x5, когда она находится в активном состоянии, но перешла в состояние over, когда мышь находится в области 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>