Question

我有一个带有Rect，Label和Group的ButtonSkin（Flex 4 Skin），该组屏蔽了Rect。在rollOver上，我将Label的x设置为this.width，并在rollOut上返回原始位置。问题是，当我rollOut时，如果我向右滚动（标签隐藏在掩码后面），它不会注册rollOut，直到我越过标签（this.width * 2）。我如何防止这种情况，所以当我滚动可见区域时，即使我仍然在掩码后面的标签上，我也会收到“rollOut”事件？

这是皮肤：


<?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:mx="library://ns.adobe.com/flex/halo"
 xmlns:style="http://www.flexinstyle.org/2009"
 minWidth="21" minHeight="21"
 alpha.disabledStates="0.5">

 <!-- states -->
 <s:states>
  <mx:State name="up" />
  <mx:State name="over" stateGroups="overStates" />
  <mx:State name="down" stateGroups="downStates" />
  <mx:State name="disabled" stateGroups="disabledStates" />
  <mx:State name="upAndSelected" stateGroups="selectedStates, selectedUpStates" />
  <mx:State name="overAndSelected" stateGroups="overStates, selectedStates" />
  <mx:State name="downAndSelected" stateGroups="downStates, selectedStates" />
  <mx:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" />
 </s:states>

 <!-- transitions -->
 <s:transitions>
  <mx:Transition fromState="*" toState="*">
   <s:Animate
    target="{labelDisplay}"
    duration="300">
    <s:SimpleMotionPath property="x"/>
   </s:Animate>
  </mx:Transition>
 </s:transitions>

 <!-- fill -->
 <s:Rect left="1" right="1" top="1" bottom="1" mask="{masker}" maskType="clip">
  <s:fill>
   <mx:LinearGradient rotation="90">
    <mx:GradientEntry id="backgroundTopGradient"
     color="0xff0000"/>
    <mx:GradientEntry id="backgroundBottomGradient" color="0xf00000"/>
   </mx:LinearGradient>
  </s:fill>
 </s:Rect>

 <!-- label -->
 <s:Label id="labelDisplay"
   textAlign="center"
   verticalAlign="middle"
   maxDisplayedLines="1" x.up="10" x.over="100"
   horizontalCenter="0" verticalCenter="1"
   left="10" right="10" top="2" bottom="2" mouseChildren="false"
   color="0xffffff" mouseEnabled="false">
 </s:Label>

 <!-- mask -->
 <s:Group id="masker" width="100%" height="100%" mouseEnabled="false">
  <s:Rect width="100%" height="100%">
   <s:fill>
    <s:SolidColor alpha="0.1"/>
   </s:fill>
  </s:Rect>
 </s:Group>

</s:SparkSkin>

Answer 1

最简单的方法是创建一个位于按钮外观中显示顶部的“命中”对象。您可以将“命中”对象创建为希望鼠标与之交互的精确尺寸，并将事件侦听器附加到“命中”对象。

在flex flex 4中，您可以使用<s:Group>，而不必担心透明度或可见性。

限制MouseEvents在Flex Skin中屏蔽？

1 个答案: