的Flex鼠標移到區域問題（自定義按鈕皮膚）

Question

我創建一個自定義按鈕，皮膚：

<?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/mx" 
      minWidth="65" minHeight="22" 
      creationComplete="GlassButtonSkin_creationCompleteHandler(event)"> 

    <fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata> 

    <fx:Declarations> 

    </fx:Declarations> 


    <fx:Script> 
     <![CDATA[ 
      import mx.events.FlexEvent; 
      import mx.graphics.RadialGradient; 

      import spark.effects.Fade; 
      import spark.effects.animation.RepeatBehavior; 

      [Bindable] 
      private var rectRollOverEffect:Rect = new Rect(); 
      private var radialGradientRollOverEffect:RadialGradient = new RadialGradient(); 
      private var gradientEntryRollOverEffect1:GradientEntry = new GradientEntry(0x8dbdff,NaN,0.7); 
      private var gradientEntryRollOverEffect2:GradientEntry = new GradientEntry(0x8dbdff,NaN,0); 
      private var indexOfRollOverEffect:int; 
      private var myFade:Fade; 

      protected function GlassButtonSkin_creationCompleteHandler(event:FlexEvent):void{ 
       parent.mouseChildren = true; 
       this.addEventListener(MouseEvent.MOUSE_MOVE,mouseMoveHandler,true); 
       this.addEventListener(MouseEvent.MOUSE_OUT,mouseOutHandler,true); 
       this.addEventListener(MouseEvent.MOUSE_OVER,mouseOverHandler,true); 

       this.addElement(rectRollOverEffect); 
       indexOfRollOverEffect = this.getElementIndex(rectRollOverEffect); 
       this.removeElementAt(indexOfRollOverEffect); 
      } 

      private function mouseOverHandler(event:MouseEvent):void{ 
       if(this.currentState == "disabled") 
        return; 

       createRollOverEffect(event,0); 

       myFade = new Fade(this.getElementAt(indexOfRollOverEffect)); 
       myFade.alphaFrom = 0; 
       myFade.alphaTo = 1; 
       myFade.duration = 200; 
       myFade.end(); 
       myFade.play(); 
      } 

      private function mouseMoveHandler(event:MouseEvent):void{ 
       if(this.currentState == "disabled") 
        return; 

       this.removeElementAt(indexOfRollOverEffect); 
       createRollOverEffect(event,1); 
      } 

      private function mouseOutHandler(event:MouseEvent):void{ 
       if(this.currentState == "disabled") 
        return; 

       this.removeElementAt(indexOfRollOverEffect); 
      } 

      private function createRollOverEffect(event:MouseEvent,alpha:int):void{ 
       rectRollOverEffect.alpha = alpha; 
       rectRollOverEffect.left = 2; 
       rectRollOverEffect.right = 2; 
       rectRollOverEffect.bottom = 2; 
       rectRollOverEffect.top = 2; 
       rectRollOverEffect.radiusX = 4; 
       rectRollOverEffect.radiusY = 4; 

       radialGradientRollOverEffect.entries = [gradientEntryRollOverEffect1,gradientEntryRollOverEffect2]; 
       radialGradientRollOverEffect.x = event.localX; 
       radialGradientRollOverEffect.y = height-2; 
       radialGradientRollOverEffect.scaleX = width/1.5; 
       radialGradientRollOverEffect.scaleY = height; 

       rectRollOverEffect.fill = radialGradientRollOverEffect; 

       this.addElementAt(rectRollOverEffect,indexOfRollOverEffect); 
      } 
     ]]> 
    </fx:Script> 


    <s:states> 
     <s:State name="up"/> 
     <s:State name="over"/> 
     <s:State name="down"/> 
     <s:State name="disabled"/> 
    </s:states> 

    <s:transitions> 
     <s:Transition fromState="over" toState="disabled"> 
      <s:CallAction target="{this}" functionName="removeElement" args="{[this.rectRollOverEffect]}"/> 
     </s:Transition> 
    </s:transitions> 



    <!-- outer border --> 
    <s:Rect left="0" right="0" top="0" bottom="0" id="outerBorder" radiusX="4" radiusY="4"> 
     <s:stroke>  
      <s:SolidColorStroke id="outerBorderStroke" weight="1" color="#ffffff" /> 
     </s:stroke> 
    </s:Rect> 

    <!-- inner border --> 
    <s:Rect left="1" right="1" top="1" bottom="1" id="innerBorder" radiusX="4" radiusY="4"> 
     <s:stroke>  
      <s:SolidColorStroke id="innerBorderStroke" weight="1" color="#000000"/> 
     </s:stroke> 
    </s:Rect> 

    <!-- fill --> 
    <!--- Defines the appearance of the Button component's background. --> 
    <s:Rect id="background" left="1" right="1" top="1" bottom="1"> 
     <s:fill> 
      <s:SolidColor alpha="0.5" color="#000000"/> 
     </s:fill> 
    </s:Rect> 

    <s:Rect id="backgroundTopPart" left="1" right="1" top="1" height="50%" 
      includeIn="up,over,disabled"> 
     <s:fill> 
      <s:LinearGradient rotation="90"> 
       <s:GradientEntry color="#ffffff" alpha="0.5" ratio="0.1"/> 
       <s:GradientEntry color="#ffffff" alpha="0.1"/> 
      </s:LinearGradient> 
     </s:fill> 
    </s:Rect> 


    <s:Label id="labelDisplay" 
      text="Send" 
      textAlign="center" 
      verticalAlign="middle" 
      color="#FFFFFF" 
      horizontalCenter="0" verticalCenter="1" 
      left="10" right="10" top="2" bottom="2"> 
    </s:Label> 

    <s:Rect id="disableForeground" left="0" right="0" top="0" bottom="0" 
      includeIn="disabled"> 
     <s:fill> 
      <s:LinearGradient rotation="90"> 
       <s:GradientEntry color="#7B7B7B" alpha="0.6" ratio="0.1"/> 
       <s:GradientEntry color="#aaaaaa" alpha="0.3"/> 
      </s:LinearGradient> 
     </s:fill> 
    </s:Rect> 


</s:SparkSkin> 

的問題是，我似乎hitarea是錯誤的。當我點擊時，這是正常的，該區域是正確的，但鼠標懸停事件，該區域似乎是不同的，並比點擊區域小。我只是不明白爲什麼。 我甚至嘗試通過添加一行手動更改按鈕外觀的命中區域this.hitArea = this.interactiveGroup其中interactiveGroup是一個包含組件邊界但不會改變任何內容的組。

Answer 1

我覺得它跟你做labelDisplay元素的皮膚。它的右邊和左邊都是10 ....如果右邊和左邊都設置爲0，那麼效果會直接顯示出來，儘管它太小了。