AS3 HorizontalScroller---- 水平滚动条控件，细节是魔鬼

水平滚动条的，向右按钮：

package{public class HorizontalScrollerLeftButton extends Button{public function HorizontalScrollerLeftButton(){super();width=10;height=10;}protected override function refreshBackground():void{//super.refreshBackground();//背景也居中this.graphics.clear();this.graphics.beginFill(0x55aa00, 0.5);this.graphics.drawRect(0,0,10,10);this.graphics.endFill();//边框this.graphics.moveTo(0,0);this.graphics.lineStyle(1,0,.5);this.graphics.lineTo(10,0);this.graphics.lineTo(10,10);this.graphics.lineTo(0,10);this.graphics.lineTo(0,0);//三角形this.graphics.moveTo(2,5);this.graphics.lineStyle(1,0,.5);this.graphics.lineTo(8,2);this.graphics.lineTo(8,8);this.graphics.lineTo(2,5);}}}

向右按钮：

package{public class HorizontalScrollerRightButton extends Button{public function HorizontalScrollerRightButton(){super('');width=10;height=10;}protected override function refreshBackground():void{//super.refreshBackground();//背景也居中this.graphics.clear();this.graphics.beginFill(0x55aa00, 0.5);this.graphics.drawRect(0,0,10,10);this.graphics.endFill();//边框this.graphics.moveTo(0,0);this.graphics.lineStyle(1,0,.5);this.graphics.lineTo(10,0);this.graphics.lineTo(10,10);this.graphics.lineTo(0,10);this.graphics.lineTo(0,0);//三角形this.graphics.moveTo(8,5);this.graphics.lineStyle(1,0,.5);this.graphics.lineTo(2,2);this.graphics.lineTo(2,8);this.graphics.lineTo(8,5);}}}

滚动器按钮：

package{/** * 滚动条的滚动器 * @author Jave.Lin */public class ScrollPacker extends Button{public override function get width():Number{return super.width;}public override function set width(value:Number):void{if(super.width!=value){super.width=value;if(super.width==0)visible=false;else visible=true;refreshBackground();}}public override function get height():Number{return super.height;}public override function set height(value:Number):void{if(super.height!=value){super.height=value;refreshBackground();}}public function ScrollPacker(){super('');refreshBackground();}protected override function refreshBackground():void{//背景也居中this.graphics.clear();this.graphics.beginFill(0x55aa00, 0.5);this.graphics.drawRect(0,0,width,height);this.graphics.endFill();//边框this.graphics.moveTo(0,0);this.graphics.lineStyle(1,0,.5);this.graphics.lineTo(width,0);this.graphics.lineTo(width,height);this.graphics.lineTo(0,height);this.graphics.lineTo(0,0);}}}

最后是：整个滚动条组件，做的时间，感觉好多细节都比较难发现。做了才知道。魔鬼啊魔鬼----细节。

package{import controlsEvents.ScrollerEvent;import flash.display.Shape;import flash.display.Sprite;import flash.events.Event;import flash.events.MouseEvent;import flash.filters.GlowFilter;import flash.geom.Point;import flash.utils.getTimer;/** * 水平滚动条 * (纯graphics控件，后期可能要考虑开放更多的一些重绘制接口：方便外部的写重绘制这部分) * @author Jave.Lin */public class HorizontalScroller extends Control{private var _leftBtn:HorizontalScrollerLeftButton;//向左的按钮--减量操作private var _rightBtn:HorizontalScrollerRightButton;//向右的按钮--增量操作private var _rollPacker:ScrollPacker;//滚动器private var _buttonInterval:Number=20;private var _curValue:int=0;//当前值private var _minValue:int=0;//最小值private var _maxValue:int=100;//最大值private var _increment:int=5;//每次操作的增/减量private var _isAdding:Boolean=false;//续持性快速操作的控件参数private var _quickCurTime:int=0;private var _quickOperateTime:int=0;private var _quickOperateTimeMax:int=500;private var _maxPos:Number;//滚动器最远的距离private var _curVisibleRate:Number=1;//当前可视范围比率，直接影响滚动器的宽度public function get curVisibleRate():Number{return _curVisibleRate;}public function set curVisibleRate(value:Number):void{if(_curVisibleRate!=value){_curVisibleRate=value;if(_curVisibleRate<=0)_curVisibleRate=0;if(_curVisibleRate >=1)_curVisibleRate=1;onLayout();}}public function get maxValue():int{return _maxValue;}public function set maxValue(value:int):void{if(_maxValue!=value){if(_minValue>value)throw new Error("HorizontalScroller maxValue less then minValue error! maxValue:"+value+" minValue:"+_minValue);_maxValue=value;if(curValue>_maxValue)curValue=_maxValue;}}public function get minValue():int{return _minValue;}public function set minValue(value:int):void{if(_minValue!=value){if(value>_maxValue)throw new Error("HorizontalScroller minValue more then maxValue error! minValue:"+value+" maxValue:"+_maxValue);_minValue=value;if(curValue<_minValue)curValue=_minValue;}}public function get curValue():int{return _curValue;}public function set curValue(value:int):void{if(_curVisibleRate>=1)return;if(_curValue!=value){var preValue:int=value;if(preValue<_minValue)preValue=_minValue;else if(preValue>_maxValue)preValue=_maxValue;if(preValue!=_curValue){_curValue=preValue;if(_minValue==_maxValue){_rollPacker.x=fixAndSetRollPackerX(_leftBtn.width);}else{_rollPacker.x=fixAndSetRollPackerX(_leftBtn.width+(_buttonInterval-_rollPacker.width)*((_curValue-_minValue)/(_maxValue-_minValue)));}dispatchEvent(new ScrollerEvent(ScrollerEvent.VALUE_CHANGED,_curValue));}}}public override function get width():Number{if(isNaN(_w)){_w=super.width;}return _w;}public override function set width(value:Number):void{if(_w!=value){var sourceBI:Number=_buttonInterval;var sumW:Number=_leftBtn.width+_rightBtn.width;_buttonInterval=value-sumW;if(_w<value){_w=value;if(_buttonInterval<10){_buttonInterval=10;_w=sumW+_buttonInterval;}}else{_w=value;}refreshBackground();onLayout();}}public override function get height():Number{return super.height;}public function HorizontalScroller(){super();}private function fixAndSetRollPackerX(prePos:Number):Number{if(prePos<_leftBtn.width)prePos=_leftBtn.width;else if(prePos>_maxPos)prePos=_maxPos;return prePos;}private function xTransformToValueAndSetIt(prePos:Number):void{if(_curVisibleRate>=1)return;if(_rollPacker.x==prePos){return;}curValue=(prePos-_leftBtn.width)/(_maxPos-_leftBtn.width)*(_maxValue-_minValue)+_minValue;}protected override function initialize():void{_leftBtn=new HorizontalScrollerLeftButton();addChild(_leftBtn);_rollPacker=new ScrollPacker();addChild(_rollPacker);_rightBtn=new HorizontalScrollerRightButton();addChild(_rightBtn);if(stage){onAddedToStageHandler();}else{addEventListener(Event.ADDED_TO_STAGE,onAddedToStageHandler);}this.width=100;this.height=_leftBtn.height;onLayout();refreshBackground();}private function onLayout():void{_leftBtn.x=0;_leftBtn.y=0;_rollPacker.x=_leftBtn.width;_rollPacker.y=0;_rollPacker.height=_leftBtn.height;_rollPacker.width=(1-_curVisibleRate)*_buttonInterval;_rightBtn.x=_leftBtn.x+_leftBtn.width+_buttonInterval;_rightBtn.y=0;_maxPos=_leftBtn.width+_buttonInterval-_rollPacker.width;}private function onAddedToStageHandler(e:Event=null):void{removeEventListener(Event.ADDED_TO_STAGE,onAddedToStageHandler);addEventListener(Event.REMOVED_FROM_STAGE,onRemovedFromStageHandler);_leftBtn.addEventListener(MouseEvent.CLICK,onLeftBtnMouseClickHandler);_leftBtn.addEventListener(MouseEvent.MOUSE_OUT,onLeftBtnMouseOutHandler);_leftBtn.addEventListener(MouseEvent.MOUSE_DOWN,onLeftBtnMouseDownHandler);_leftBtn.addEventListener(MouseEvent.MOUSE_UP,onLeftBtnMouseUpHandler);_rightBtn.addEventListener(MouseEvent.CLICK,onRightBtnMouseClickHandler);_rightBtn.addEventListener(MouseEvent.MOUSE_OUT,onRightBtnMouseOutHandler);_rightBtn.addEventListener(MouseEvent.MOUSE_DOWN,onRightBtnMouseDownHandler);_rightBtn.addEventListener(MouseEvent.MOUSE_UP,onRightBtnMouseUpHandler);_rollPacker.addEventListener(MouseEvent.MOUSE_DOWN,onRollPackerMouseDownHandler);}//鼠标点下滚动器时，滚动器的备份坐标private var _mouseDownRollPackerSourceX:Number=0;//鼠标点下滚动器时，相对舞台的鼠标x坐标private var _mouseDownStageMouseSourceX:Number=0;//鼠标点下滚动器时，相对舞台的上一次的鼠标x坐标private var _lastStageMouseX:Number=0;private function onStageEnterFrameHandler(e:Event):void{if(_lastStageMouseX!=stage.mouseX){xTransformToValueAndSetIt(fixAndSetRollPackerX(_mouseDownRollPackerSourceX+(stage.mouseX-_mouseDownStageMouseSourceX)));_lastStageMouseX=stage.mouseX;}}private function onStageMouseUpHandler(e:MouseEvent):void{stage.removeEventListener(Event.ENTER_FRAME,onStageEnterFrameHandler);_rollPacker.addEventListener(MouseEvent.MOUSE_DOWN,onRollPackerMouseDownHandler);}private function onRollPackerMouseDownHandler(e:MouseEvent):void{_mouseDownRollPackerSourceX=_rollPacker.x;_mouseDownStageMouseSourceX=stage.mouseX;_rollPacker.removeEventListener(MouseEvent.MOUSE_DOWN,onRollPackerMouseDownHandler);stage.addEventListener(Event.ENTER_FRAME,onStageEnterFrameHandler);stage.addEventListener(MouseEvent.MOUSE_UP,onStageMouseUpHandler);}private function onRightBtnMouseClickHandler(e:MouseEvent):void{if(_curVisibleRate>=1)return;curValue+=_increment;}private function onRightBtnMouseUpHandler(e:MouseEvent):void{removeEventListener(Event.ENTER_FRAME,onEnterFrameHandler);_quickOperateTime=0;}private function onRightBtnMouseDownHandler(e:MouseEvent):void{if(_curVisibleRate>=1)return;_quickCurTime=getTimer();_isAdding=true;addEventListener(Event.ENTER_FRAME,onEnterFrameHandler);}private function onRightBtnMouseOutHandler(e:MouseEvent):void{removeEventListener(Event.ENTER_FRAME,onEnterFrameHandler);_quickOperateTime=0;}private function onLeftBtnMouseUpHandler(e:MouseEvent):void{removeEventListener(Event.ENTER_FRAME,onEnterFrameHandler);_quickOperateTime=0;}private function onLeftBtnMouseDownHandler(e:MouseEvent):void{if(_curVisibleRate>=1)return;_quickCurTime=getTimer();_isAdding=false;addEventListener(Event.ENTER_FRAME,onEnterFrameHandler);}private function onLeftBtnMouseOutHandler(e:MouseEvent):void{removeEventListener(Event.ENTER_FRAME,onEnterFrameHandler);_quickOperateTime=0;}private function onLeftBtnMouseClickHandler(e:MouseEvent):void{if(_curVisibleRate>=1)return;curValue-=_increment;}private function onEnterFrameHandler(e:Event):void{_quickOperateTime+=getTimer()-_quickCurTime;if(_quickOperateTime>_quickOperateTimeMax){if(_isAdding){curValue+=_increment;}else{curValue-=_increment;}}}private function onRemovedFromStageHandler(e:Event):void{removeEventListener(Event.REMOVED_FROM_STAGE,onRemovedFromStageHandler);_leftBtn.removeEventListener(MouseEvent.CLICK,onLeftBtnMouseClickHandler);_leftBtn.removeEventListener(MouseEvent.MOUSE_OUT,onLeftBtnMouseOutHandler);_leftBtn.removeEventListener(MouseEvent.MOUSE_DOWN,onLeftBtnMouseDownHandler);_leftBtn.removeEventListener(MouseEvent.MOUSE_UP,onLeftBtnMouseUpHandler);_rightBtn.removeEventListener(MouseEvent.CLICK,onRightBtnMouseClickHandler);_rightBtn.removeEventListener(MouseEvent.MOUSE_OUT,onRightBtnMouseOutHandler);_rightBtn.removeEventListener(MouseEvent.MOUSE_DOWN,onRightBtnMouseDownHandler);_rightBtn.removeEventListener(MouseEvent.MOUSE_UP,onRightBtnMouseUpHandler);_rollPacker.removeEventListener(MouseEvent.MOUSE_DOWN,onRollPackerMouseDownHandler);stage.removeEventListener(Event.ENTER_FRAME,onStageEnterFrameHandler);stage.removeEventListener(MouseEvent.MOUSE_UP,onStageMouseUpHandler);}protected override function refreshBackground():void{this.graphics.clear();//背景this.graphics.beginFill(0x008800,.5);this.graphics.drawRect(0,0,width,height);this.graphics.endFill();}}}

运行测试图片效果：