2015-05-25 58 views
0

我相信这一定很简单,但我看不到它。Flex RadioButton皮肤透明背景允许鼠标点击通过

我已经创建了一个RadioButton的皮肤,它基本上是一个正方形的组,里面有一个三角形。三角形的尖端位于广场的中心。所有的作品都是矢量路径,并在MXML中定义。

当我在我的用户界面中定位RadioButton时,它们彼此重叠,尽管可见的三角形没有。

当我单击RadioButton时,我无法点击最顶层的RadioButtons的透明区域到下面的RadioButtons的三角形图形。任何人都可以建议我哪里错了?

这是当前Skin文件:

<s:Skin 
     xmlns:fx="http://ns.adobe.com/mxml/2009" 
     xmlns:s="library://ns.adobe.com/flex/spark" 
     alpha.disabledStates="0.5"> 

    <fx:Metadata> 
    <![CDATA[ 
    /** 
    * @copy spark.skins.spark.ApplicationSkin#hostComponent 
    */ 
    [HostComponent("spark.components.RadioButton")] 
    ]]> 
    </fx:Metadata> 

    <fx:Script> 
    <![CDATA[ 
    /** 
    * @private 
    */ 
    private static const focusExclusions:Array = ["labelDisplay"]; 

    /** 
    * @private 
    */ 
    override public function get focusSkinExclusions():Array { return focusExclusions;}; 
    ]]> 
    </fx:Script> 

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

    <!-- Main artwork Group defining scale --> 
    <s:Group 
      scaleX="0.175" scaleY="0.175"> 

    <s:Group 
      width="1024" height="1024"> 

     <!-- Up Artwork --> 
     <s:Group 
       id="viewpointUp" 
       excludeFrom="selectedStates"> 

     <s:Path id="BeamDisabled" x="183.549" y="31.3008" winding="nonZero" data="M0 0 328.451 480.698 656.902 0"> 
      <s:fill> 
      <s:LinearGradient x="328.452" y="480.698" scaleX="480.698" rotation="270"> 
       <s:GradientEntry ratio="0" color="#BFBFBF"/> 
       <s:GradientEntry ratio="0.570107" color="#EBEBEB" alpha="0.429893"/> 
       <s:GradientEntry ratio="1" color="#FFFFFF" alpha="0"/> 
      </s:LinearGradient> 
      </s:fill> 
     </s:Path> 
     <s:Ellipse id="SpotDisabledEllipse" x="477" y="477" width="70" height="70"> 
      <s:fill> 
      <s:SolidColor color="#BFBFBF"/> 
      </s:fill> 
      <s:stroke> 
      <s:SolidColorStroke weight="8" miterLimit="10" color="#FFFFFF"/> 
      </s:stroke> 
      <s:filters> 
      <s:GlowFilter blurX="16" blurY="16" quality="2" color="#000000" alpha="0.25"/> 
      </s:filters> 
     </s:Ellipse> 
     </s:Group> 

     <!-- Up and Selected Artwork --> 
     <s:Group 
       id="viewpointSelected" 
       includeIn="selectedStates"> 

     <s:Path id="BeamEnabled" x="183.549" y="31.3008" winding="nonZero" data="M0 0 328.451 480.698 656.902 0"> 
      <s:fill> 
      <s:LinearGradient x="328.452" y="480.698" scaleX="480.698" rotation="270"> 
       <s:GradientEntry ratio="0" color="#14948B"/> 
       <s:GradientEntry ratio="0.29695" color="#6FBDB8" alpha="0.70305"/> 
       <s:GradientEntry ratio="0.570107" color="#B6DEDB" alpha="0.429893"/> 
       <s:GradientEntry ratio="0.815192" color="#E9F5F4" alpha="0.184808"/> 
       <s:GradientEntry ratio="1" color="#FFFFFF" alpha="0"/> 
      </s:LinearGradient> 
      </s:fill> 
     </s:Path> 
     <s:Ellipse id="SpotEnabledEllipse" x="477" y="477" width="70" height="70"> 
      <s:fill> 
      <s:SolidColor color="#14948B"/> 
      </s:fill> 
      <s:stroke> 
      <s:SolidColorStroke weight="8" miterLimit="10" color="#FFFFFF"/> 
      </s:stroke> 
      <s:filters> 
      <s:GlowFilter blurX="16" blurY="16" quality="2" color="#000000" alpha="0.25"/> 
      </s:filters> 
     </s:Ellipse> 
     </s:Group> 
    </s:Group> 
    </s:Group> 

    <!-- Label --> 
    <!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay --> 
    <s:Label id="labelDisplay" 
      textAlign="start" 
      verticalAlign="middle" 
      maxDisplayedLines="1" 
      left="18" right="0" top="3" bottom="3" verticalCenter="2" /> 
</s:Skin> 

回答

0

问题可能是与X和你在你的皮肤文件中指定的y值。当您将这些皮肤应用于单选按钮时,x值= 183和y = 33将不起作用,因为单选按钮在实际应用中会占用很小的空间。

的x和y值必须是椭圆

零点和现在删除x和y的路径也并设置horizo​​ntalCenter = 0和verticalCenter = 0

和如果可能的话指定最小宽度和高度以椭圆和路径也确保路径宽度应该小于椭圆的路径宽度

希望这项工程

+0

在视觉上一切都很好。该作品在Illustrator中创建并导出为FXG,然后调整为MXML文件,这就是为什么它具有x和y值来将“路径”定位到“组”中。这些RadioButton中的4个在我的用户界面2中使用的是最重要的,彼此分开,当点击工作时很好,所以我认为这些作品不是问题。 – TDC

+0

无法理解你的问题。您能否请您发布示例代码或您如何定位单选按钮的图片? –