AS3 PictrueBox控件 ---- 使用水平、垂直滚动条的图片框

图片框类：

package
{
	import controlsEvents.ScrollerEvent;
	
	import flash.display.Bitmap;
	import flash.display.Shape;

	/**
	 * 图片框类
	 * @author Jave.Lin
	 */	
	public class PictureBox extends Control
	{
		private var _hs:HorizontalScroller;//水平滚动条
		private var _vs:VerticalScroller;//垂直滚动条
		private var _imageMask:Shape;//图片的遮罩
		private var _image:Bitmap;//图片
		private var _sW:Number;//显示图片区域的宽
		private var _sH:Number;//显示图片区域的高
		
		public override function set width(value:Number):void
		{
			if(super.width!=value)
			{
				super.width=value;
				
				onLayout();
				redrawMask();
				updateScroller();
			}
		}

		public override function set height(value:Number):void
		{
			if(super.height!=value)
			{
				super.height=value;
				
				onLayout();
				redrawMask();
				updateScroller();
			}
		}
		
		public function get image():Bitmap
		{
			return _image;
		}
		
		public function set image(value:Bitmap):void
		{
			if(_image!=value)
			{
				if(_image && _image.parent)
				{
					_image.parent.removeChild(_image);
				}
				_image=value;
				
				if(_image)
				{
					addChild(_image);
					_imageMask.visible=true;
					_image.mask=_imageMask;
					setChildIndex(_image,0);
				}
				else
				{
					_imageMask.visible=false;
				}
				updateScroller();
			}
		}
		
		public function PictureBox($image:Bitmap=null)
		{
			super();
			image=$image;
		}
		//提示同时设置宽、高的一个公开方法，因为每设置一下，宽、或是高，都会重绘一次
		//而这个方法设置两个属性，只重绘一次
		public function setWidthHeight($width:Number,$height:Number):void
		{
			if(super.width!=$width && super.height!=$height)
			{
				super.width=$width;
				super.height=$height;
				onLayout();
				redrawMask();
				updateScroller();
			}
		}
		
		private function onLayout():void
		{
			//计算出显示区域的宽、高
			_sW=width-_vs.width;
			_sH=height-_hs.height;
			//垂直滚动条的高，及位置
			_vs.height=_sH;
			_vs.x=_sW;
			_vs.y=0;
			//水平滚动条的宽，及位置
			_hs.width=_sW;
			_hs.x=0;
			_hs.y=_sH;			
		}
		
		private function updateScroller():void
		{
			if(_image==null)
			{
				_vs.curVisibleRate=1;
				_hs.curVisibleRate=1;
			}
			else
			{
				//值范围
				_vs.maxValue=_image.height-_sH;
				_hs.maxValue=_image.width-_sW;
				//显示比率
				_vs.curVisibleRate=1-(_sH/_image.height);
				_hs.curVisibleRate=1-(_sW/_image.width);
			}
		}
		
		private function redrawMask():void
		{
			_imageMask.graphics.clear();
			//背景
			_imageMask.graphics.beginFill(0,.2);
			_imageMask.graphics.drawRect(0,0,_sW,_sH);
			_imageMask.graphics.endFill();
		}
		
		protected override function initialize():void
		{
			_hs=new HorizontalScroller();
			addChild(_hs);
			
			_vs=new VerticalScroller();
			addChild(_vs);
			
			_w=100;
			_h=100;
			
			_imageMask=new Shape();
			_imageMask.visible=false;
			
			addChild(_imageMask);
			
			_vs.addEventListener(ScrollerEvent.VALUE_CHANGED,onVsValueChangedHandler);
			_hs.addEventListener(ScrollerEvent.VALUE_CHANGED,onHsValueChangedHandler);
			
			onLayout();
			redrawMask();
		}
		
		private function onHsValueChangedHandler(e:ScrollerEvent):void
		{
			if(_image)
			{
				_image.x=-e.value;
			}
		}
		
		private function onVsValueChangedHandler(e:ScrollerEvent):void
		{
			if(_image)
			{
				_image.y=-e.value;
			}
		}
		
		protected override function refreshBackground():void
		{
			this.graphics.clear();
			//背景
			this.graphics.beginFill(0x008800,.2);
			this.graphics.drawRect(0,0,width,height);
			this.graphics.endFill();
		}
	}
}

测试代码：

package
{
	import controlsEvents.RadioButtonEvent;
	import controlsEvents.ScrollerEvent;
	
	import flash.display.Bitmap;
	import flash.display.Loader;
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.net.URLRequest;
	import flash.system.ApplicationDomain;
	import flash.system.LoaderContext;

	[SWF(width="1200", height="720", frameRate="60")]
	public class ControlsTest extends Sprite
	{
		private var rbt:RadioButton;
		private var bt:Button;
		private var hs:HorizontalScroller;
		private var vs:VerticalScroller;
		private var hsLb:Label;
		private var vsLb:Label;
		private var pb:PictureBox;
		
		public function ControlsTest()
		{
			stage.color=0;
			stage.frameRate=60;
			stage.align=StageAlign.TOP_LEFT;
			stage.scaleMode=StageScaleMode.NO_SCALE;
		
			rbt=new RadioButton();
			rbt.text="test";
			rbt.x=50;
			rbt.y=50;
			rbt.checked=true;
			
			addChild(rbt);
			
			rbt.addEventListener(RadioButtonEvent.ON_CHECKED_CHANGED,onCheckedChangedHandler);
			
			bt=new Button("testButton");
			addChild(bt);
			
			bt.x=100;
			bt.y=100;
			bt.addEventListener(MouseEvent.CLICK,onBtClickHandler);
			
			//bt.width=50;
			
			hs=new HorizontalScroller();
			hs.curVisibleRate=.5;
			addChild(hs);
			
			hs.x=100;
			hs.y=200;
			hs.maxValue=1000;
			hs.minValue=500;
			
			hs.width=200;
//			hs.height=20;
			hs.addEventListener(ScrollerEvent.VALUE_CHANGED,onHsValueChangedHandler);
			
			hsLb=new Label();
			addChild(hsLb);
			hsLb.x=100;
			hsLb.y=200+10;
			hsLb.text="HorizontalScroller.value:"+hs.curValue;
			
			vs=new VerticalScroller();
			vs.curVisibleRate=.5;
			addChild(vs);
			
			vs.x=100;
			vs.y=250;
			vs.maxValue=1000;
			vs.minValue=500;
			
			vs.height=200;
//			vs.width=20;
			vs.addEventListener(ScrollerEvent.VALUE_CHANGED,onVsValueChangedHandler);
			
			vsLb=new Label();
			addChild(vsLb);
			vsLb.x=100;
			vsLb.y=200+60;
			vsLb.text="HorizontalScroller.value:"+vs.curValue;
			
			pb=new PictureBox();
			addChild(pb);
			
			pb.width=400;
			pb.height=200;
			
			pb.x=300;
			pb.y=50;
			//下面这行代码，可以看动，在EnterFrame事件时，时刻设置pb的宽、高都是可以的。
			pb.addEventListener(Event.ENTER_FRAME,onPbEnterFrameHandler);
			
			var loader:Loader=new Loader();
			loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onPicLoadedHandler);
			loader.load(new URLRequest("res/test.jpg"),new LoaderContext(false, ApplicationDomain.currentDomain));
		}
		
		private var _dW:Number=10;
		private var _dH:Number=10;
		
		private function onPbEnterFrameHandler(e:Event):void
		{
			if(pb.width<=100)
			{
				_dW=Math.abs(_dW);
			}
			else if(pb.width>=400)
			{
				_dW=Math.abs(_dW)*-1;
			}
			
			if(pb.height<=100)
			{
				_dH=Math.abs(_dH);
			}
			else if(pb.height>=200)
			{
				_dH=Math.abs(_dH)*-1;
			}
			
			pb.setWidthHeight(pb.width+_dW,pb.height+_dH);
			
//			trace("pb.width",pb.width);
//			trace("pb.height",pb.height);
		}
		
		private function onPicLoadedHandler(e:Event):void
		{
//			trace(e);
			var bmp:Bitmap=e.currentTarget.content as Bitmap;
//			trace(bmp);
			
			pb.image=bmp;
		}
		
		private function onBtClickHandler(e:MouseEvent):void
		{
			hs.minValue+=100;
			if(hs.minValue>=hs.maxValue)
			{
				hs.minValue=0;
			}
			hs.curVisibleRate+=.1;
			if(hs.curVisibleRate>=1)
			{
				hs.curVisibleRate=.1;
			}
			
			if(pb.hasEventListener(Event.ENTER_FRAME))
			{
				pb.removeEventListener(Event.ENTER_FRAME,onPbEnterFrameHandler);
			}
			else
			{
				pb.addEventListener(Event.ENTER_FRAME,onPbEnterFrameHandler);
			}
		}
		
		private function onVsValueChangedHandler(e:ScrollerEvent):void
		{
			vsLb.text="VerticalScroller.value:"+e.value;
		}
		
		private function onHsValueChangedHandler(e:ScrollerEvent):void
		{
			hsLb.text="HorizontalScroller.value:"+e.value;
		}
		
		private function onCheckedChangedHandler(e:RadioButtonEvent):void
		{
			trace(rbt.checked);
		}
	}
}

运行图片效果：

查看运行图片效果图全图

图片框里面的图片资源：是一款日本SLG单机游戏，挺好玩的，游戏名称叫：超级魔法大战，以图是技能素材图：

也就是以上代码中：'res/test.jpg'这图片：