在Flex中如果要实现像Html一样的平铺拉伸可能需要自己重写skin组件,默认的flex组件不支持背景图像的平铺功能。以下我是写的一个有关panenl容器的的skin,如果要写canva,Hbox,Application等等的话只需要在原有的基础上稍做修改就可以了,这个组件实现了Html背景平铺拉伸的所有功能,而且可以通过css样式进行设置。以下是源代码,希望对需要的人有所帮助,如不明白欢迎加本人qq:545196225,注明Flex讨论。
一、组件:skin.MyBackgroundSkin package skin { import flash.display.Bitmap; import flash.display.BitmapData; import flash.display.DisplayObject; import flash.display.Shape; import flash.geom.Matrix; import mx.core.EdgeMetrics; import mx.core.IChildList; import mx.core.IContainer; import mx.core.IRawChildrenContainer; import mx.core.mx_internal; import mx.skins.halo.PanelSkin; public class MyBackgroundSkin extends PanelSkin { //position信息 private var position:Object; //repeat信息 private var repeat:Object; //背景图片的x坐标 private var bgX:int = 0; //背景图片的y坐标 private var bgY:int = 0; /** * 这个皮肤是专门用来做panel或titleWindow皮肤的 * 如果做HBox,Canvas等容器这部分可以省略去,扩展类写HaloBorder **/ //panel边框信息 private var topH:Number;//panel顶部边框的高度 private var bottomH:Number;//panel底部边框的高度 private var leftW:Number;//panel左边边框的高度 private var rightW:Number;//panel右边边框的高度 public function MyBackgroundSkin() { super(); } //覆盖updateDisplayList方法 override protected function updateDisplayList(w:Number, h:Number):void { super.updateDisplayList(w,h); if(!hasBackgroundImage) { return; } //获取背景图片 var childrenList:IChildList = (parent is IRawChildrenContainer)?(IRawChildrenContainer(pare nt).rawChildren):IChildList(parent); var backgroundImage:DisplayObject = childrenList.getChildAt(1); //从样式表中获取有关背景平铺的信息 position = getStyle("backgroundImagePosition"); repeat = getStyle("backgroundImageRepeat"); //从样式表中获取panel有关信息 leftW = getStyle("borderThicknessLeft"); rightW = getStyle("borderThicknessRight"); topH = Object(parent).mx_internal::getHeaderHeightProxy() + getStyle("borderThicknessTop");//panel顶部的高度由两部分相加: headerHeigh 和 borderThiknesstop if(getStyle("borderThicknessBottom") == null) { //如果在css中并没有定义该属性的话该属性的默认值有一下两种情况: bottomH = leftW;//(1)当panel中没有向controlBar中添加任何组件 //bottomH = topH;//(2)当panel的controlBar中有控件时候 } else { bottomH = getStyle("borderThicknessBottom"); } //设置默认值 if(repeat == null) { repeat = "no-repeat"; } if(position == null || !(position is Array)) { position = ["left","top"]; } setImagePosition(backgroundImage,w,h); drawRepeat(backgroundImage,w,h); } //设置背景位置 private function setImagePosition(target:DisplayObject,w:Number,h:N umber):void { if(position == null || !(position is Array)) { return; } var posHorizontal:String = (position[0] as String).toLowerCase(); var posVertical:String = (position[1] as String).toLowerCase(); //取得边框 var bm:EdgeMetrics = (parent is IContainer)?IContainer(parent).viewMetrics:borderM etrics; //设置背景在x轴的起始位置 switch(posHorizontal) { case "left": bgX = bm.left; break; case "center": //target 默认的位置为剧中 bgX = target.x; break; case "right": bgX = parent.width - bm.right - target.width; break; default: //当传值传传错时候:比如给它传了一个"righ" bgX = leftW; break; } //设置背景在y轴的起始位置 switch(posVertical) { case "top": bgY = bm.top; break; case "middle": //target 默认的位置为剧中 bgY = target.y; break; case "bottom": bgY = parent.height - bm.bottom - target.height; break; default: //当传值传传错时候:比如给它传了一个"righ" bgY = topH; break; } target.x = bgX; target.y = bgY; //设置遮罩位置 const backgroundMask:Shape = Shape(target.mask); backgroundMask.x = bgX; backgroundMask.y = bgY; } //绘制背景图片 private function drawRepeat(target:DisplayObject,w:Number,h:Number) :void { if(!hasBackgroundImage) { return; } if(repeat == "no-repeat") { return; } var backgroundImageClass:Class = getStyle("backgroundImage"); var bgImage:DisplayObject = new backgroundImageClass(); //如果背景不是图片 if(!(bgImage as Bitmap)) { return; } //取得背景图片的数据 var backgroundBitmapData:BitmapData = (bgImage as Bitmap).bitmapData; //隐藏默认的背景图片 target.visible = false; //使用矩阵设置背景图片的填充位置 var mtr:Matrix = new Matrix(); //graphics.clear();//如果是给canva,Hbox等皮肤可以去掉该行注释,这样Panel默认的边框就去掉了 //重绘背景图片 switch(repeat) { case "repeat-x": mtr.tx = bgX; mtr.ty = bgY; graphics.beginBitmapFill(backgroundBitmapData,mtr) ; graphics.drawRect(bgX,bgY,w - rightW - bgX,bgImage.height); break; case "repeat-y": mtr.tx = bgX; mtr.ty = bgY; graphics.beginBitmapFill(backgroundBitmapData,mtr) ; graphics.drawRect(bgX,bgY,bgImage.width,h - bottomH - bgY); break; case "repeat": mtr.tx = bgX; mtr.ty = bgY; graphics.beginBitmapFill(backgroundBitmapData,mtr) ; graphics.drawRect(bgX,bgY,w - rightW - bgX,h - bottomH - bgY); break; default: mtr.tx = leftW; mtr.ty = topH; graphics.beginBitmapFill(backgroundBitmapData,mtr) ; graphics.drawRect(bgX,bgY,w - rightW - bgX,h - bottomH - bgY); break; } graphics.endFill(); } } }
二、主程序: package skin { import flash.display.Bitmap; import flash.display.BitmapData; import flash.display.DisplayObject; import flash.display.Shape; import flash.geom.Matrix; import mx.core.EdgeMetrics; import mx.core.IChildList; import mx.core.IContainer; import mx.core.IRawChildrenContainer; import mx.core.mx_internal; import mx.skins.halo.PanelSkin; public class MyBackgroundSkin extends PanelSkin { //position信息 private var position:Object; //repeat信息 private var repeat:Object; //背景图片的x坐标 private var bgX:int = 0; //背景图片的y坐标 private var bgY:int = 0; /** * 这个皮肤是专门用来做panel或titleWindow皮肤的 * 如果做HBox,Canvas等容器这部分可以省略去,扩展类写HaloBorder **/ //panel边框信息 private var topH:Number;//panel顶部边框的高度 private var bottomH:Number;//panel底部边框的高度 private var leftW:Number;//panel左边边框的高度 private var rightW:Number;//panel右边边框的高度 public function MyBackgroundSkin() { super(); } //覆盖updateDisplayList方法 override protected function updateDisplayList(w:Number, h:Number):void { super.updateDisplayList(w,h); if(!hasBackgroundImage) { return; } //获取背景图片 var childrenList:IChildList = (parent is IRawChildrenContainer)?(IRawChildrenContainer(pare nt).rawChildren):IChildList(parent); var backgroundImage:DisplayObject = childrenList.getChildAt(1); //从样式表中获取有关背景平铺的信息 position = getStyle("backgroundImagePosition"); repeat = getStyle("backgroundImageRepeat"); //从样式表中获取panel有关信息 leftW = getStyle("borderThicknessLeft"); rightW = getStyle("borderThicknessRight"); topH = Object(parent).mx_internal::getHeaderHeightProxy() + getStyle("borderThicknessTop");//panel顶部的高度由两部分相加: headerHeigh 和 borderThiknesstop if(getStyle("borderThicknessBottom") == null) { //如果在css中并没有定义该属性的话该属性的默认值有一下两种情况: bottomH = leftW;//(1)当panel中没有向controlBar中添加任何组件 //bottomH = topH;//(2)当panel的controlBar中有控件时候 } else { bottomH = getStyle("borderThicknessBottom"); } //设置默认值 if(repeat == null) { repeat = "no-repeat"; } if(position == null || !(position is Array)) { position = ["left","top"]; } setImagePosition(backgroundImage,w,h); drawRepeat(backgroundImage,w,h); } //设置背景位置 private function setImagePosition(target:DisplayObject,w:Number,h:N umber):void { if(position == null || !(position is Array)) { return; } var posHorizontal:String = (position[0] as String).toLowerCase(); var posVertical:String = (position[1] as String).toLowerCase(); //取得边框 var bm:EdgeMetrics = (parent is IContainer)?IContainer(parent).viewMetrics:borderM etrics; //设置背景在x轴的起始位置 switch(posHorizontal) { case "left": bgX = bm.left; break; case "center": //target 默认的位置为剧中 bgX = target.x; break; case "right": bgX = parent.width - bm.right - target.width; break; default: //当传值传传错时候:比如给它传了一个"righ" bgX = leftW; break; } //设置背景在y轴的起始位置 switch(posVertical) { case "top": bgY = bm.top; break; case "middle": //target 默认的位置为剧中 bgY = target.y; break; case "bottom": bgY = parent.height - bm.bottom - target.height; break; default: //当传值传传错时候:比如给它传了一个"righ" bgY = topH; break; } target.x = bgX; target.y = bgY; //设置遮罩位置 const backgroundMask:Shape = Shape(target.mask); backgroundMask.x = bgX; backgroundMask.y = bgY; } //绘制背景图片 private function drawRepeat(target:DisplayObject,w:Number,h:Number) :void { if(!hasBackgroundImage) { return; } if(repeat == "no-repeat") { return; } var backgroundImageClass:Class = getStyle("backgroundImage"); var bgImage:DisplayObject = new backgroundImageClass(); //如果背景不是图片 if(!(bgImage as Bitmap)) { return; } //取得背景图片的数据 var backgroundBitmapData:BitmapData = (bgImage as Bitmap).bitmapData; //隐藏默认的背景图片 target.visible = false; //使用矩阵设置背景图片的填充位置 var mtr:Matrix = new Matrix(); //graphics.clear();//如果是给canva,Hbox等皮肤可以去掉该行注释,这样Panel默认的边框就去掉了 //重绘背景图片 switch(repeat) { case "repeat-x": mtr.tx = bgX; mtr.ty = bgY; graphics.beginBitmapFill(backgroundBitmapData,mtr) ; graphics.drawRect(bgX,bgY,w - rightW - bgX,bgImage.height); break; case "repeat-y": mtr.tx = bgX; mtr.ty = bgY; graphics.beginBitmapFill(backgroundBitmapData,mtr) ; graphics.drawRect(bgX,bgY,bgImage.width,h - bottomH - bgY); break; case "repeat": mtr.tx = bgX; mtr.ty = bgY; graphics.beginBitmapFill(backgroundBitmapData,mtr) ; graphics.drawRect(bgX,bgY,w - rightW - bgX,h - bottomH - bgY); break; default: mtr.tx = leftW; mtr.ty = topH; graphics.beginBitmapFill(backgroundBitmapData,mtr) ; graphics.drawRect(bgX,bgY,w - rightW - bgX,h - bottomH - bgY); break; } graphics.endFill(); } } }
发表评论
-
字符串转化
2012-07-06 09:51 728附加说明 atol()与使 ... -
正则表达式查找匹配的子字符串
2012-07-06 09:44 739今天想使用正则表达式在一个字符串中查找匹配的子字符串,结果 ... -
正则表达式用法及实例
2012-07-06 09:36 7681. 概述 正则表达 ... -
MFC使用Skin++
2012-07-06 09:29 1124一.使用皮肤 1. ... -
javascript使用getElementById会抓到name的问题
2012-07-05 20:44 712今天一个朋友问一个问题。 页面的html代码为: ... -
Android组件
2012-07-03 13:42 552虚心是知识的向导 ... -
Android组件
2012-07-03 12:14 514虚心是知识的向导 ... -
最全的FLEX网站收集分享
2012-07-02 10:06 583一、国外站点 1.资源 类 Adobe Fl ... -
最全的FLEX网站收集分享
2012-07-02 10:06 566一、国外站点 1.资源类 Adobe Fl ... -
flex 绑定资源
2012-07-02 10:06 743Adobe Flex supports several i ... -
Flex4的皮肤skin
2012-07-02 10:06 6001.SparkSkin介绍 ... -
QTP
2012-07-02 09:41 640... -
flex与flash的fscommand通信
2012-07-01 09:21 911为了业务需要,最近利用Flex来重写我们公司客户端(c++ ... -
怎么去掉Flex4生成的SWF加载时的进度条
2012-07-01 09:21 617汗~AJAX感太强了 但我要一下子加载 坛子里说了 ... -
怎么去掉Flex4生成的SWF加载时的进度条
2012-07-01 09:20 526汗~AJAX感太强了 但 ... -
Flex学习笔记一(Flex简介)
2012-06-30 11:10 691Flex学习笔记一(Flex简介) 2011年02月01日 ... -
很不错的flex资源
2012-06-30 11:10 672很不错的flex资源 2011年11月15日 重要提醒: ... -
flex初学
2012-06-30 11:10 509flex初学 2011年09月06日 flex定义: ... -
flex as3开源组件
2012-06-30 11:10 916flex as3开源组件 2011年01月21日 ope ... -
VBS脚本
2012-01-19 13:36 616VBS脚本 2011年10月01日 2 取得本机计算机名 ...
相关推荐
display: flex弹性布局
Flex中背景平铺的做法,很简单,一个自定义类,在css样式表中调用即可。 适用于flex3,flex4中已经不需要这样做了,直接可以支持背景图片平铺。
Flash+Flex+AIR移动开发入门经典.pdf
《flash+flex+air移动开发入门经典——适用于android、ios和blackberry》 第1章 flash、flex和air简介 1 1.1 adobe flash 1 1.2 actionscript 3.0 2 1.2.1 ecmascript 2 1.2.2 关键概念 3 1.3 flex框架 11 ...
Flash+Flex+Air 移动开发入门经典——适用于Android、iOS、BlackBerry系统
flash+flex+air移动开发入门经典(4)源码 最后一个了
flex三种实现滚动条方式,其实是两种,样式的以两种表现形式写出了。然后,自定了一个滚动条
Flex与.NET互操作(五):使用FileReference+HttpHandler实现文件上传/下载 一文的源码的完整工程文件,包含FLEX客户端和 ASP.NET服务端源码! 在VS2010和FLash builder4 中运行!
很久之前无聊的时候用flex实现的一个BullBreaker小游戏,点击小球可消除周围同色小球,可以回滚操作至起始状态。swf格式的可以直接在视频播放器中打开来玩,也可以打开html文件在浏览器中玩(需要flash支持)。
Flex在线拍照功能:Flex+flash ;Flex+flash; Flex+flash ;Flex+flash
flex iframe 支持在flash中嵌套入html jsp asp php等flex iframe 支持在flash中嵌套入html jsp asp php等flex iframe 支持在flash中嵌套入html jsp asp php等flex iframe 支持在flash中嵌套入html jsp asp php等flex...
在用了Flex布局会发现,当水平排列后,会发现所有子项的高度都变成一样的了。 这是因为Flex 布局会默认: 把所有子项变成水平排列。...到此这篇关于Flex布局让子项保持自身高度的实现的文章就介绍到这
FLEX 背景图片设置的方法,很实用的技巧
flash+flex+air移动开发入门经典(3)源码 分4部分下载,因为太大了
flex 设置背景音乐flex 设置背景音乐flex 设置背景音乐flex 设置背景音乐flex 设置背景音乐flex 设置背景音乐flex 设置背景音乐
简洁的实现了在flex中实现背景音乐的功能
1.背景:Flex Socket通信及安全策略,使用flex实现客户端,java实现服务端; 2.重点解决安全策略问题:将flash发布为html格式后,本地访问页面后,一般可以与服务器进行socket通信;但是部署到tomcat服务器上后无法...
主要给大家介绍了CSS中的display:flex和display:inline-flex属性,文中分别通过两段实例代码给大家介绍了display:flex和display:inline-flex的使用效果,感兴趣的朋友们可以参考借鉴,下面来一起看看吧。
转:Flex+++LCDS+++Java+入门教程
本例,flash内嵌在flex里,示例了: 1、flash调用flex的函数(方法) 2、flex调用flash的函数(方法)