3.28.给Hbox 设置背景图片和圆角

2023-08-08 22:33:03

字体：大中小

来源：转载

供稿：网友

3.28.1 问题
你需要创建一个圆角和背景图片的Hbox。
3.28.2 解决办法
加载一个图片对象并且使用beginBitmapFill 方法创建一个位图填充。
3.28.3 讨论
如果背景不是一张图片的话，设置Hbox 的cornerRadius 会出现圆角。但是，如果按照下面这样给HBox 设置一张背景图片：

-XML

<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方法完成绘画程序，如下：

-ActionScript

this.graphics.beginBitmapFill(bm, m, true, true);
this.graphics.drawRoundRectComplex(0, 0, this.width, this.height,20,20, 20, 20);
this.graphics.endFill();

一个加载器加载图片，然后加载的图片的所有数据都存入一个BitmapData 对象。

-ActionScript

var bm:BitmapData = new BitmapData(loader.width, loader.height,true, 0x000000);
bm.draw(this.loader);

现在你可以使用BitmapData 对象来创建填充。完整例子代码如下：

-XML

<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("../../assets/beach.jpg"));
}p
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>