flex VSlider 滑竿 （track） 宽度的改变

??? <mx:VSlider id="volumSlider" left="11" top="10" width="14" height="137" dataTipPrecision="0"
?? ??? ??? ??? ?maximum="100" minimum="0" showTrackHighlight="true" snapInterval="1"
?? ??? ??? ??? ?thumbSkin="@Embed(source='/assets/images/control.png')"
?? ??? ??? ??? ?trackHighlightSkin="com.webex.videosharing.skin.HighWidthSliderSkin"

?? ??? ??? ??? ?trackSkin="com.xxx.xxx.xxx.WidthSliderSkin" value="50"/>

要想改变其滑竿的宽度也就是track的宽度 必须自己 写两个类替换 默认的 trackSkin 和 trackHighSkin(高度的skin)

package com.xxx.xxx.xxx
{
?? ?import flash.geom.Matrix;
?? ?
?? ?import mx.core.EdgeMetrics;
?? ?import mx.skins.halo.SliderTrackSkin;

?? ?public class HighWidthSliderSkin extends? SliderTrackSkin
?? ?{
?? ??? ?public function HighWidthSliderSkin()
?? ??? ?{
?? ??? ?}
?? ??? ?override public function get measuredWidth():Number? ?
?? ??? ?{? ?
?? ??? ??? ?return 7;
?? ??? ?}
?? ??? ?
?? ??? ?override public function get measuredHeight():Number? ?
?? ??? ?{? ?
?? ??? ??? ?return 7;
?? ??? ?}
?? ??? ?
?? ??? ?override public function get height():Number? ?
?? ??? ?{? ?
?? ??? ??? ?return 7;
?? ??? ?}
?? ??? ?
?? ??? ?override protected function drawRoundRect(x:Number,y:Number,width:Number,height:Number,cornerRadius:Object=null,color:Object=null,alpha:Object=null,gradientMatrix:Matrix=null,gradientType:String="linear",gradientRatios:Array=null,hole:Object=null):void
?? ??? ?{
?? ??? ??? ?
?? ??? ??? ?super.graphics.beginFill(0x09A2E0,1);
?? ??? ??? ?super.drawRoundRect(x,y-1,width,height,null,0x09A2E0,1,? null,null);
?? ??? ??? ?super.graphics.lineStyle(1,0x027FB8);
?? ??? ?}? ????
?? ?
?? ?}

}

package com.xxx.xxx.xxx
{
?? ?import flash.geom.Matrix;
?? ?
?? ?import mx.core.EdgeMetrics;
?? ?import mx.skins.halo.SliderTrackSkin;

?? ?public class WidthSliderSkin extends? SliderTrackSkin
?? ?{
?? ??? ?public function WidthSliderSkin()
?? ??? ?{
?? ??? ??? ?
?? ??? ?}
?? ??? ?
?? ??? ?
?? ??? ?
?? ??? ?override public function get height():Number
?? ??? ?{
?? ??? ??? ?
?? ??? ??? ?return 7;
?? ??? ?}
?? ??? ?
?? ??? ?override public function get measuredHeight():Number? ?
?? ??? ?{? ?
?? ??? ??? ?return 7;
?? ??? ?}
?? ??? ?
?? ??? ?override protected function drawRoundRect(x:Number,hole:Object=null):void
?? ??? ?{
?? ??? ??? ?
?? ??? ??? ?super.graphics.beginFill(0xE2E2E2)
?? ??? ??? ?super.graphics.drawRect(x,y,height);
?? ??? ???? super.graphics.lineStyle(1,0xE2E2E2);
?? ??? ??? ?
?? ??? ??? ?//super.drawRoundRect(x,0xE2E2E2,alpha,null);
?? ??? ?}
?? ????
?? ?
?? ?}
}

然后即可看到效果：