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

简介: 俗话说:拳不离手,曲不离口。学过的技能不用,放长了就生疏了,今天以前的同事问我:用户改变浏览器窗口尺寸时,flash中的图片如何重新定位于4个角上。花了近一刻钟才回忆想来:stage有Resize事件,呵呵 代码如下: 1.
俗话说:拳不离手,曲不离口。学过的技能不用,放长了就生疏了,今天以前的同事问我:用户改变浏览器窗口尺寸时,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;
		}
		
	}
	
}

截图二张:

img_ac3f6c52d1d6739fe5b31150e93142c1.jpg

img_2efee710919e3404d7b4821865d4211d.jpg

在线演示地址:http://img.24city.com/jimmy/resize/resizedemo.html

目录
相关文章
|
1天前
|
JavaScript 前端开发 UED
JS:如何获取浏览器窗口尺寸?
JS:如何获取浏览器窗口尺寸?
53 1
|
7月前
|
JavaScript 对象存储
在阿里云OpenAPI 为什么oss 图片链接, 在浏览器访问直接下载了,不是预览呢?
在阿里云OpenAPI 为什么oss 图片链接, 在浏览器访问直接下载了,不是预览呢?
499 1
|
1天前
|
Java 测试技术 定位技术
《手把手教你》系列技巧篇(二十三)-java+ selenium自动化测试-webdriver处理浏览器多窗口切换下卷(详细教程)
【4月更文挑战第15天】本文介绍了如何使用Selenium进行浏览器窗口切换以操作不同页面元素。首先,获取浏览器窗口句柄有两种方法:获取所有窗口句柄的集合和获取当前窗口句柄。然后,通过`switchTo().window()`方法切换到目标窗口句柄。在项目实战部分,给出了一个示例,展示了在百度首页、新闻页面和地图页面之间切换并输入文字的操作。最后,文章还探讨了在某些情况下可能出现的问题,并提供了一个简单的本地HTML页面示例来演示窗口切换的正确操作。
48 0
|
1天前
|
Java 测试技术 Python
Selenium帮助你轻松实现浏览器多窗口操作
Selenium帮助你轻松实现浏览器多窗口操作
95 0
|
1天前
|
存储 安全 前端开发
浏览器跨窗口通信:原理与实践
浏览器跨窗口通信:原理与实践
56 0
|
1天前
|
域名解析 应用服务中间件 对象存储
解决阿里云oss图片浏览器访问直接下载而不是打开
解决阿里云oss图片浏览器访问直接下载而不是打开
603 0
|
9月前
selenium--浏览器窗口截图
selenium--浏览器窗口截图
|
1天前
|
Web App开发 存储 前端开发
Chrome 浏览器的隐身窗口(incognito window)功能解析
Chrome 浏览器的隐身窗口(incognito window)功能解析
117 0
|
1天前
|
JavaScript
js实现跨浏览器tab选项卡页通信、传参,监听localStorage.变量的实时变化,实现打开多个浏览器页面窗口相互可以传参通信
js实现跨浏览器tab选项卡页通信、传参,监听localStorage.变量的实时变化,实现打开多个浏览器页面窗口相互可以传参通信
|
1天前
|
JavaScript 前端开发
js怎样获取浏览器窗口尺寸
js怎样获取浏览器窗口尺寸
33 1