Я снял кожу с большого пальца hSlider с изображением. Но изображение является пиксельным, как будто оно было вынуждено изменить размер. Это просто симпатичный круг с радиусом 30 пикселей.
Другое дело, что вместо того, чтобы новая кнопка была чисто разделена пополам дорожкой, она находится чуть ниже дорожки, касательной к ней. Так что теперь я должен изменить положение, изменив его значение у в SliderThumbSkin.mxml? И (предположительно потому, что его точка регистрации находится в верхнем левом углу), когда я сдвигаю его до упора вправо, он идет прямо с конца дорожки, пока его левый край не окажется у правого края дорожки. Это также может испортить вычисления для свойства 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>
Кто-нибудь может понять, почему это отображается неправильно? Спасибо!