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

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

截图二张:

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏落影的专栏

直播APP常用动画效果

介绍 记录、总结开发遇到一些问题,大家一起交流学习。 这次带来,对直播APP的常用动画总结。 直播Live 效果展示 下面是一个很多平台都有的入门豪华礼物动...

58480
来自专栏向治洪

Android仿网易云音乐播放界面

概述 网易云音乐是一款非常优秀的音乐播放器,尤其是播放界面,使用唱盘机风格,显得格外古典优雅。这里抛砖引玉,原文地址:http://www.jianshu.co...

50860
来自专栏编程微刊

前端js实现打印(导出)excel表格

40220
来自专栏非典型技术宅

iOS动画系列之二:带时分秒指针的时钟动画(下)1. 创建CALayer2. 设置时分秒针3. 创建CADisplayLink4. 成稿

11210
来自专栏葡萄城控件技术团队

Spread for Windows Forms快速入门(6)---定义单元格的外观

在Spread中每个单元格都可以被看作一个独立的对象,开发人员不仅可以设置单元格的类型,而且可以为每个单元格设置不同的外观属性。 设置单元格的颜色 你可以为一个...

20090
来自专栏Golang语言社区

转--Golang语言版 ssh口令破解工具

使用说明: ? iplist的格式为ip:port,如111.111.111.111:22 user.txt为用户名字典 password.txt为密码字典 g...

32770
来自专栏郭霖

Android高级图片滚动控件,编写3D版的图片轮播器

大家好,好久不见了,最近由于工作特别繁忙,已经有一个多月的时间没写博客了,我也是深感惭愧。那么今天的这篇既然是阔别了一个多月的文章,当然要带来更加给力点的内容了...

85680
来自专栏Android干货园

Android源码解析--Material Design之水波纹点击效果RippleEffect使用

版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/lyhhj/article/details/48...

45320
来自专栏拂晓风起

结合JSFL/actionscript 实现轮廓动画

11450
来自专栏数据小魔方

leaflet在线地图进阶宝典——高级交互特性

本文针对leaflet的高级交互特性进行展开,主要涉及到leaflet中等值线地图的鼠标悬浮效果及点击效果的动态呈现。这也是leaflet的天然HTML属性所具...

44260

扫码关注云+社区

领取腾讯云代金券