我用图像为hSlider的拇指蒙皮了。但是图像是像素化的，好像它被迫调整大小一样。它只是一个半径为30像素的漂亮圆圈。
另一件事情是，不是新的按钮被轨道干净地一分为二，而是在轨道下方，与它相切。所以现在我必须通过修改SliderThumbSkin.mxml中的y值来重新定位它？并且（可能是因为它的注册点位于左上方）当我将它一直向右滑动时，它会从轨道的末端向右移动，直到它的左边缘位于轨道的右边缘。这也可能会破坏hSlider.value属性的计算。
你认为你可以只应用皮肤而它会取代按钮，但似乎它的位置和大小都被错误地操纵了。拇指的大小会自动重置或调整大小吗？有没有办法正确而干净地做到这一点？
编辑：这是整个测试项目的代码：
//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>
任何人都可以看到为什么这不能正确显示？谢谢！
答案 0 :(得分：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：图像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')"
/>