具有透明背景的Flex单选按钮外观，允许鼠标单击

Question

我敢肯定这很简单，但我看不到。

我为RadioButton创建了一个外观，该外观本质上是一个正方形组，其中包含一个三角形。 三角形的尖端位于正方形的中心。 所有艺术品都是矢量路径，并在MXML中定义。

当我在用户界面中放置RadioButton时，它们会相互重叠，尽管可见的三角形不会重叠。

当我单击“单选按钮”时，无法单击最上方的“单选按钮”的透明区域，直到其下方的“单选按钮”的三角形图案。 谁能建议我要去哪里错了？

这是当前的皮肤文件：

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

Answer 1

问题可能出在皮肤文件中指定的x和y值。 当您将这些外观应用于单选按钮时，x值= 183和y = 33将不起作用，因为单选按钮在实际应用中将占很小的位置。

椭圆的x和y值必须为零

然后现在也删除路径的x和y，并设置horizo​​ntalCenter = 0和verticalCenter = 0。

并尽可能指定椭圆和路径的最小宽度和高度，并确保路径宽度小于椭圆的宽度

希望这行得通