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

简介: 俗话说:拳不离手,曲不离口。学过的技能不用,放长了就生疏了,今天以前的同事问我:用户改变浏览器窗口尺寸时,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

目录
相关文章
|
JavaScript 前端开发 UED
JS:如何获取浏览器窗口尺寸?
JS:如何获取浏览器窗口尺寸?
574 1
|
7月前
|
前端开发
WebView2 控件(基于 Microsoft Edge (Chromium) 的嵌入式浏览器控件),保存资源(图片、脚本、CSS)
WebView2 控件(基于 Microsoft Edge (Chromium) 的嵌入式浏览器控件),保存资源(图片、脚本、CSS)
372 62
|
XML 缓存 JSON
为什么浏览器中有些图片、PDF等文件点击后有些是预览,有些是下载
为什么浏览器中有些图片、PDF等文件点击后有些是预览,有些是下载
799 0
|
算法 安全 前端开发
基于postMessage和BroadcastChannel实现浏览器跨Tab窗口通信的方法介绍
基于postMessage和BroadcastChannel实现浏览器跨Tab窗口通信的方法介绍
603 1
|
Web App开发 JavaScript 前端开发
使用 JS 实现在浏览器控制台打印图片 console.image()
在前端开发过程中,调试的时候,我们会使用 console.log 等方式查看数据。但对于图片来说,仅靠展示的数据与结构,是无法想象出图片最终呈现的样子的。 虽然我们可以把图片数据通过 img 标签展示到页面上,或将图片下载下来进行预览。但这样的调试过程实在是复杂,何不实现一个 console.image() 呢?
416 1
使用 JS 实现在浏览器控制台打印图片 console.image()
|
安全 索引 Windows
roogoo发布的quartz32.dll让浏览器不断弹出广告窗口
roogoo发布的quartz32.dll让浏览器不断弹出广告窗口
|
数据采集 Web App开发 JavaScript
快速参考:用C# Selenium实现浏览器窗口缩放的步骤
在C#结合Selenium的网络爬虫应用中,掌握浏览器窗口缩放、代理IP、cookie与user-agent设置至关重要。本文详述了如何配置代理(如亿牛云加强版),自定义用户代理,启动ChromeDriver,并访问目标网站如抖音。通过执行JavaScript代码实现页面缩放至75%,并添加cookie增强匿名性。此策略有效规避反爬机制,提升数据抓取的准确度与范围。代码示例展示了整个流程,确保爬虫操作的灵活性与高效性。
433 3
|
编解码 JavaScript 前端开发
**BOM**是浏览器对象模型,用于控制浏览器窗口
【6月更文挑战第22天】**BOM**是浏览器对象模型,用于控制浏览器窗口,如`window`、`navigator`、`location`等,提供弹窗、定时器及事件处理功能。**DOM**是文档对象模型,将HTML文档转化为可编程的树结构,允许创建、修改元素及处理事件。两者协同工作,赋能JavaScript与网页交互。
113 2
|
Web App开发 编解码
软件开发常见流程之兼容性和手机屏页面设计,PC端和移动端常见浏览器,国内的UC都是根据Webkit修改过来的内核,开发重点关注尺寸,常见移动端尺寸汇总,移动端,理想视口根据你设别的样式进行修改
软件开发常见流程之兼容性和手机屏页面设计,PC端和移动端常见浏览器,国内的UC都是根据Webkit修改过来的内核,开发重点关注尺寸,常见移动端尺寸汇总,移动端,理想视口根据你设别的样式进行修改
|
Web App开发 前端开发
canvas保存图片时,谷歌浏览器Chrome报错【解决方案】Not allowed to navigate top frame to data URL
canvas保存图片时,谷歌浏览器Chrome报错【解决方案】Not allowed to navigate top frame to data URL
987 0

热门文章

最新文章