浏览器窗口尺寸改变时的图片自动重新定位

菩提树下的杨过

发布于 2018-01-22 15:42:55

8860

发布于 2018-01-22 15:42:55

文章被收录于专栏：菩提树下的杨过菩提树下的杨过菩提树下的杨过

俗话说：拳不离手，曲不离口。学过的技能不用，放长了就生疏了，今天以前的同事问我：用户改变浏览器窗口尺寸时，flash中的图片如何重新定位于4个角上。花了近一刻钟才回忆想来:stage有Resize事件，呵呵

代码如下：

1.先把加载图片的逻辑封装一下

package  {	
	import flash.display.Sprite;
	import flash.display.Loader;
	import flash.display.LoaderInfo;
	import flash.net.URLRequest;
	import flash.events.Event;
	import flash.display.Bitmap;
	import flash.events.IOErrorEvent;
	import flash.system.LoaderContext;
	
	public class LoadImage extends Sprite {
		
		private var _imgWidth:int;
		private var _imgHeight:int;
		
		public function LoadImage(url:String,imgWidth:int=380,imgHeight:int=305) {
			
			this._imgWidth = imgWidth;
			this._imgHeight = imgHeight;
			
			var _request:URLRequest = new URLRequest(url);
			var _loader:Loader = new Loader();
			var _lc:LoaderContext = new LoaderContext(true);
			_loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loadComplete);
			_loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,loadIO_Error);
			_loader.load(_request,_lc);
			
		}		
		
		private function loadComplete(e:Event):void
		{
			//trace("loadComplete");
			var li:LoaderInfo = e.currentTarget as LoaderInfo;
			var bmp:Bitmap = li.content as Bitmap;
			bmp.height = _imgHeight;
			bmp.width = _imgWidth;
			addChild(bmp);
		}
		
		private function loadIO_Error(e:IOErrorEvent):void
		{
			trace("load error!");
		}
	}	
}

2.主文档类

package  {
	
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	
	
	public class ResizeDemo extends MovieClip {
		
		private var _top_left:LoadImage; //左上 的图片
		private var _top_right:LoadImage; //右上 的图片
		private var _bottom_left:LoadImage; //左下 的图片
		private var _bottom_right:LoadImage; //右下 的图片
		private var _center:LoadImage; //中心的图片
		private var _WIDTH:int; //舞台的宽度
		private var _HEIGHT:int; //舞台的高度
		
		public function ResizeDemo() {
			// constructor code
			
			if (stage)
			{
				init();
			}
			else
			{
				stage.addEventListener(Event.ADDED_TO_STAGE,init);
			}
		}
		
		private function init(e:Event=null)
		{
			stage.removeEventListener(Event.ADDED_TO_STAGE,init);
			stage.addEventListener(Event.RESIZE,reSizeHandler);
			stage.align = StageAlign.TOP_LEFT; 
			stage.scaleMode = StageScaleMode.NO_SCALE;
			
			
			//加载图片
			_top_left = new LoadImage("top_left.jpg",100,150);
			_top_right = new LoadImage("top_right.jpg",100,150);
			_bottom_left = new LoadImage("bottom_left.jpg",100,150);
			_bottom_right = new LoadImage("bottom_right.jpg",100,150);
			_center = new LoadImage("center.jpg",200,300);
			
			
			addChild(_top_left);
			addChild(_top_right);
			addChild(_bottom_left);
			addChild(_bottom_right);
			addChild(_center);
			
			adjustPosition();
			
			
		}
		
		private function reSizeHandler(e:Event=null)
		{
			adjustPosition();
		}
		
		//调整位置
		private function adjustPosition()
		{
			_WIDTH = stage.stageWidth;
			_HEIGHT = stage.stageHeight;
			
			trace("_WIDTH =",_WIDTH);
			trace("_HEIGHT =",_HEIGHT);
			trace("_top_left.width =",_top_left.width);
			
			//定位 左上的图片
			_top_left.x = _top_left.y = 0;
			
			//定位 右上的图片
			_top_right.x = _WIDTH - _top_left.width;
			_top_right.y = 0;
			
			//定位 左下的图片
			_bottom_left.x = 0;
			_bottom_left.y = _HEIGHT - _bottom_left.height;
			
			//定位 右下的图片
			_bottom_right.x = _WIDTH - _bottom_right.width;
			_bottom_right.y = _HEIGHT - _bottom_right.height;
			
			//定位中心的图片
			_center.x = (_WIDTH - _center.width)/2;
			_center.y = (_HEIGHT - _center.height)/2;
		}
		
	}
	
}

截图二张：