`

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(new
		URLRequest("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>
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics