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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Flex 中,HBox 和 VBox 都是容器,可以用来对子组件进行水平或垂直布局。其中组件的布局可以通过设置各组件的样式来实现。 对于 HBox,子组件会从左到右依次排列,可以通过设置子组件的样式来控制子组件的宽度、高度、间距等属性,比如: ```css <s:Group> <s:HGroup gap="10"> <s:Button label="Button 1"/> <s:Button label="Button 2"/> <s:Button label="Button 3"/> </s:HGroup> </s:Group> ``` 上面的代码中,`<s:HGroup>` 标签表示使用 HBox 布局,`gap` 属性表示子组件之间的间隔距离。可以看到,三个 Button 组件会依次横向排列,之间的间隔为 10px。 对于 VBox,子组件会从上到下依次排列,可以通过设置子组件的样式来控制子组件的宽度、高度、间距等属性,比如: ```css <s:Group> <s:VGroup gap="10"> <s:Button label="Button 1"/> <s:Button label="Button 2"/> <s:Button label="Button 3"/> </s:VGroup> </s:Group> ``` 上面的代码中,`<s:VGroup>` 标签表示使用 VBox 布局,`gap` 属性表示子组件之间的间隔距离。可以看到,三个 Button 组件会依次纵向排列,之间的间隔为 10px。 如果想让子组件自动居中,可以使用 Flex 提供的布局属性 `horizontalCenter` 和 `verticalCenter`,比如: ```css <s:Group> <s:HGroup horizontalCenter="0" verticalCenter="0"> <s:Button label="Button 1"/> <s:Button label="Button 2"/> <s:Button label="Button 3"/> </s:HGroup> </s:Group> ``` 上面的代码中,`horizontalCenter` 和 `verticalCenter` 属性分别表示子组件在水平和垂直方向上的居中对齐。可以看到,三个 Button 组件会水平和垂直居中排列。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值