Question

我确定这一定很简单但我无法看到它。

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

当我将RadioButtons放置在我的UI中时，它们彼此重叠，尽管可见的三角形没有。

当我点击RadioButtons时，我无法点击最顶层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>

Answer 1

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

椭圆

的x和y值必须为零

现在也删除路径的x和y，并设置horizontalCenter = 0和verticalCenter = 0。

如果可能的话，还要指定椭圆和路径的最小宽度和高度，并确保路径宽度应小于椭圆的宽度

希望这有效

Flex RadioButton皮肤透明背景，允许鼠标点击通过

1 个答案: