限制鼠标事件在 Flex 皮肤中屏蔽? [英] Restrict MouseEvents to Mask in Flex Skin?

问题描述

我有一个 ButtonSkin(Flex 4 Skin)，其中包含一个 Rect、一个标签和一个 Group，该 Group 屏蔽了 Rect.在 rollOver 上，我将 Label 的 x 动画化为 this.width，然后在 rollOut 上，回到原始位置.问题是，当我滚出时，如果我向右滚(标签隐藏在掩码后面)，它不会注册滚出，直到我越过标签(this.width * 2).我如何防止这种情况发生，所以当我滚出可见区域时，即使我仍在遮罩后面的标签上，我也会收到rollOut"事件?

I have a ButtonSkin (Flex 4 Skin) with a Rect, a Label, and a Group, the Group masking the Rect. On rollOver, I animate the Label's x to this.width, and on rollOut, back to the original position. The problem is, when I rollOut, if I roll to the right (where the label is hiding behind the mask), it doesn't register rollOut, until I go past the label (this.width * 2). How do I prevent that, so when I rollOut of the visible area, even though I'm still over the label behind the mask, I get a "rollOut" event?

这是皮肤:

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

推荐答案

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

The easiest way to do this is to create a "hit" object that sits on the top of the display in your button skin. You create the "hit" object to the exact dimensions you want the mouse to be interactive with and attach the event listeners to the "hit" object.

在 flex flex 4 中，您可以使用 而不必担心透明度或可见性.

In flex flex 4 you can use <s:Group> and not have to worry about transparency or visibility.

这篇关于限制鼠标事件在 Flex 皮肤中屏蔽?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！