Flex学习记录(给Hbox 设置背景图片和圆角)
你需要创建一个圆角和背景图片的Hbox。
加载一个图片对象并且使用beginBitmapFill 方法创建一个位图填充。
如果背景不是一张图片的话,设置Hbox 的cornerRadius 会出现圆角。但是,如果按照下面
这样给HBox 设置一张背景图片:
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400"
height="300" backgroundImage="../../assets/beach.jpg"
borderStyle="solid" borderThickness="0" cornerRadius="20">
Hbox的角则会以图片的直角为准。要将图片的角变成圆角,需要将图片转化换成填充图片。
所有的UIComponent都有graphics属性,一个flash.display.Graphic对象的实例,这个属性
具有低水平的制图程序。通过使用beginBitmapFill方法,你可以为drawRoundRect复杂方法
创建一个填充(fill)以使用,用你加载的图片的二进制数据填充到一个圆角矩形内。调用
endFill方法完成绘画程序,如下:
this.graphics.beginBitmapFill(bm, m, true, true);
this.graphics.drawRoundRectComplex(0, 0, this.width, this.height,
20,20, 20, 20);
this.graphics.endFill();
一个加载器加载图片,然后加载的图片的所有数据都存入一个BitmapData 对象。
var bm:BitmapData = new BitmapData(loader.width, loader.height,
true, 0x000000);
bm.draw(this.loader);
现在你可以使用BitmapData 对象来创建填充。完整例子代码如下:
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400"height="300" creationComplete="createFill()"cornerRadius="20"><mx:Script><![CDATA[import flash.net.URLRequest;private var loader:Loader;private function createFill():void{loader = new Loader();loader.contentLoaderInfo.addEventListener(Event.COMPLETE,completeLoad);loader.load(newURLRequest("FlexLogo.jpg"));}private function completeLoad(event:Event):void{var bm:BitmapData = new BitmapData(loader.width,loader.height, true,0x000000);bm.draw(this.loader);var m:Matrix = new Matrix();m.createBox(this.width/loader.width,this.height/loader.height);this.graphics.beginBitmapFill(bm, m, true, true);this.graphics.drawRoundRectComplex(0, 0, this.width,this.height, 20, 20, 20, 20);this.graphics.endFill();}]]></mx:Script></mx:HBox>