- 浏览: 12365 次
最新评论
在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(); } } }
发表评论
-
C 常用字符串函数
2012-07-06 09:52 696字符串长度 size_tstrlen(const ch ... -
分享一个java正则验证类
2012-07-06 09:45 578网上正则验证的很多,但是没找到一个比较集中的类,这个是我工 ... -
ATL 正则表达式, CAtlRegExp
2012-07-06 09:37 922/* 最近简单看了下ATL中的正则表达式,感觉不好用,主要 ... -
Android模拟器RAM修改方法 - 尤其是3.0
2012-07-06 09:30 687我们以Windows平台的SDK为例,这里Android开 ... -
jsp实现拍摄证件照代码
2012-07-05 20:45 925实现思路如下: 1.设置好拍照背景,如使用红布或者蓝布 ... -
vc2010下自动化组件开发示例
2012-07-03 13:43 893本文所指的自动化组件为 Automation 类型的 MF ... -
Flex DataGrid 控件知识汇总,创建、全选、删除、分页、样式
2012-07-02 12:23 786DataGrid控件是一个可以展示多列数据的列表控件。它是 ... -
设备状态显示的flex实现说明
2012-07-02 12:22 591Author: Allan(吴进刚) 做这个图还是费 ... -
Flex权威指南3学习笔记之一------界面知识(四)
2012-07-02 12:22 663运用视图实现界面的切换 1.在DashBoard.m ... -
flex 日期下拉框,选择一段日期
2012-07-01 09:57 610在一般网页的制作过程中,我们做的程序,日期选择框,通过js ... -
flex4中的StyleManager 不生效
2012-07-01 09:56 768Flex4中的StyleManager到底怎么用呢?为什么 ... -
使用Adobe Flex开发Google Wave Gadgets
2012-07-01 09:56 529Adobe Flash Builder 4 简 ... -
Flex文件上传
2012-07-01 09:56 672今天花了一点时间 ... -
flex 联机游戏开发 - 中国象棋游戏:(一)核心逻辑
2012-06-30 16:22 760flex 联机游戏开发 - 中国象棋游戏:(一)核心逻辑 2 ... -
Flex技术在企业开发中的应用
2012-06-30 16:22 284Flex技术在企业开发中的应用 2010年10月08日 ... -
使用FLEX 和 Actionscript开发FLASH 游戏(一)
2012-06-30 16:22 559使用FLEX 和 Actionscript开发FLASH 游戏 ... -
FLEX和Actionscript开发FLASH游戏1
2012-06-30 16:22 610FLEX和Actionscript开发FLASH游戏1 20 ...
相关推荐
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 布局会默认: 把所有子项变成水平排列。...到此这篇关于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 背景图片设置的方法,很实用的技巧
flash+flex+air移动开发入门经典(3)源码 分4部分下载,因为太大了
flex 设置背景音乐flex 设置背景音乐flex 设置背景音乐flex 设置背景音乐flex 设置背景音乐flex 设置背景音乐flex 设置背景音乐
简洁的实现了在flex中实现背景音乐的功能
1.背景:Flex Socket通信及安全策略,使用flex实现客户端,java实现服务端; 2.重点解决安全策略问题:将flash发布为html格式后,本地访问页面后,一般可以与服务器进行socket通信;但是部署到tomcat服务器上后无法...
转:Flex+++LCDS+++Java+入门教程
本例,flash内嵌在flex里,示例了: 1、flash调用flex的函数(方法) 2、flex调用flash的函数(方法)