Spark Skin按钮大小设置在哪里？

Question

我用图片给hSlider的拇指换了皮。但图像是像素化的，就像是被迫调整大小一样。这只是一个半径为30像素的漂亮圆圈。

发生的另一件事是，新按钮不是被轨道清楚地一分为二，而是恰好在轨道下方，与轨道相切。所以现在我必须通过在SliderThumbSkin.mxml中修改它的y值来重新定位它？而且(大概是因为它的注册点在左上角)当我把它一直滑到右边时，它会一直向右滑出轨道的末端，直到它的左边缘位于轨道的右边缘。这也可能会使hSlider.value属性的计算变得混乱。

你会认为你可以简单地应用皮肤，它将取代按钮，但似乎它的位置和大小都是错误的manipulated.Is拇指的大小自动重置或调整大小的某处？有没有一种方法可以正确而干净地做到这一点呢？

编辑:下面是整个测试项目的代码：

//HSliderTest.mxml:
<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
firstView="views.HSliderTestHomeView" applicationDPI="160">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
</s:ViewNavigatorApplication>

//SliderSkin.mxml. Only modified the <s:Button tag at the end:
<?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:fb="http://ns.adobe.com/flashbuilder/2009" minHeight="11"
alpha.disabled="0.5">

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

]]>
</fx:Metadata>

<fx:Script fb:purpose="styling">
/* Define the skin elements that should not be colorized.
For slider, the skin itself is colorized but the individual parts are
not. */

static private const exclusions:Array = ["track", "thumb"];

/**
* @private
*/
override public function get colorizeExclusions():Array {return
exclusions;}

/**
* @private
*/
override protected function initializationComplete():void
{
useChromeColor = true;
super.initializationComplete();
}
</fx:Script>

<fx:Script>
/**
* @private
*/
override protected function measure() : void
{
// Temporarily move the thumb to the left of the Slider so
measurement
// doesn't factor in its x position. This allows resizing the
// HSlider to less than 100px in width.
var thumbPos:Number = thumb.getLayoutBoundsX();
thumb.setLayoutBoundsPosition(0, thumb.getLayoutBoundsY());
super.measure();
thumb.setLayoutBoundsPosition(thumbPos, thumb.getLayoutBoundsY());
}
</fx:Script>

<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>

<fx:Declarations>
<!--- The tooltip used in the mx.controls.Slider control.
To customize the DataTip's appearance, create a custom
HSliderSkin class.-->
<fx:Component id="dataTip">
<s:DataRenderer minHeight="24" minWidth="40" y="-34">
<s:Rect top="0" left="0" right="0" bottom="0">
<s:fill>
<s:SolidColor color="0x000000" alpha=".9"/>
</s:fill>
<s:filters>
<s:DropShadowFilter angle="90" color="0x999999"
distance="3"/>
</s:filters>
</s:Rect>
<s:Label id="labelDisplay" text="{data}"
horizontalCenter="0" verticalCenter="1"
left="5" right="5" top="5" bottom="5"
textAlign="center" verticalAlign="middle"
fontWeight="normal" color="white" fontSize="11">
</s:Label>
</s:DataRenderer>
</fx:Component>
</fx:Declarations>

<!--- The default skin class is HSliderTrackSkin.
@copy spark.components.supportClasses.TrackBase#track
@see spark.skins.spark.HSliderTrackSkin -->
<s:Button id="track" left="0" right="0" width="11" height="11"
tabEnabled="false"
skinClass="spark.skins.spark.HSliderTrackSkin" />

<!--- The default skin class is HSliderThumbSkin.
@copy spark.components.supportClasses.TrackBase#thumb
@see spark.skins.spark.HSliderThumbSkin -->
<s:Button id="thumb" top="0" bottom="0" height="11" width="11"
tabEnabled="false" skinClass="skins.SliderThumbSkin" />
</s:SparkSkin>

//SliderThumbSkin.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
minWidth="21"
minHeight="21"
alpha.disabled="0.5">

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

<!-- states -->
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<s:Image source.up="assets/PurpleOnlyCircle60x60.png"
source.over="assets/PurpleOnlyCircle60x60.png"
source.down="assets/PurpleOnlyCircle60x60.png"
source.disabled="assets/PurpleOnlyCircle60x60.png"
width="60"
height="60"/>
</s:SparkButtonSkin>

有没有人知道为什么这个不能正确显示？谢谢!

Answer 1

这就是答案。

SliderSkin.mxml --

 //change this line
 thumb.setLayoutBoundsPosition(thumbPos, (thumb.getLayoutBoundsY() **- 25**));
 //and change this line too
 <s:Button id="thumb" **top="-25"** bottom="0" height="11" width="11"

所以整个类看起来是这样的：

   @see spark.components.HSlider
   @see spark.skins.spark.HSliderThumbSkin
   @see spark.skins.spark.HSliderTrackSkin

  @langversion 3.0
  @playerversion Flash 10
  @playerversion AIR 1.5
  @productversion Flex 4
 -->
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minHeight="11" alpha.disabled="0.5">

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

]]>
</fx:Metadata> 

<fx:Script fb:purpose="styling">
    /* Define the skin elements that should not be colorized. 
       For slider, the skin itself is colorized but the individual parts are not. */

    static private const exclusions:Array = ["track", "thumb"];

    /**
     * @private
     */  
    override public function get colorizeExclusions():Array {return exclusions;}

    /**
     * @private
     */
    override protected function initializationComplete():void
    {
        useChromeColor = true;
        super.initializationComplete();
    }
</fx:Script>

<fx:Script>
    /**
     *  @private
     */  
    override protected function measure() : void
    {
        // Temporarily move the thumb to the left of the Slider so measurement
        // doesn't factor in its x position. This allows resizing the
        // HSlider to less than 100px in width. 
        var thumbPos:Number = thumb.getLayoutBoundsX();
        thumb.setLayoutBoundsPosition(0, thumb.getLayoutBoundsY());
        super.measure();
        thumb.setLayoutBoundsPosition(thumbPos, (thumb.getLayoutBoundsY() - 25));
    }
</fx:Script>

<s:states>
    <s:State name="normal" />
    <s:State name="disabled" />
</s:states>

<fx:Declarations>
    <!--- The tooltip used in the mx.controls.Slider control. 
           To customize the DataTip's appearance, create a custom HSliderSkin class.-->
    <fx:Component id="dataTip">     
       <s:DataRenderer minHeight="24" minWidth="40" y="-34">  
          <s:Rect top="0" left="0" right="0" bottom="0">
                <s:fill>
                    <s:SolidColor color="0x000000" alpha=".9"/>
                </s:fill>
                <s:filters>
                    <s:DropShadowFilter angle="90" color="0x999999" distance="3"/>
                </s:filters>
            </s:Rect>
            <s:Label id="labelDisplay" text="{data}"
                     horizontalCenter="0" verticalCenter="1"
                     left="5" right="5" top="5" bottom="5"
                     textAlign="center" verticalAlign="middle"
                     fontWeight="normal" color="white" fontSize="11">
            </s:Label>
        </s:DataRenderer>
   </fx:Component>
</fx:Declarations>

<!--- The default skin class is HSliderTrackSkin. 
        @copy spark.components.supportClasses.TrackBase#track
        @see spark.skins.spark.HSliderTrackSkin -->
<s:Button id="track" left="0" right="0" width="11" height="11"
          tabEnabled="false"
          skinClass="spark.skins.spark.HSliderTrackSkin" />

<!--- The default skin class is HSliderThumbSkin.
        @copy spark.components.supportClasses.TrackBase#thumb 
        @see spark.skins.spark.HSliderThumbSkin -->
<s:Button id="thumb" top="-25" bottom="0" height="11" width="11"
          tabEnabled="false"                                                                                                                                                                                                                                                                                                                                                                                                                    
          skinClass="skins.SliderThumbSkin" />

​

SliderThumbSkin --更改s:Image x="-25"：

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

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

<s:Image  x="-25" source.up="@Embed('assets/buttons/PurpleOnlyCircle60x60.png')"
                         source.over="@Embed('assets/buttons/PurpleOnlyCircle60x60.png')"
                         source.down="@Embed('assets/buttons/PurpleOnlyCircle60x60.png')"
                         source.disabled="@Embed('assets/buttons/PurpleOnlyCircle60x60.png')"
         />

​