你需要创建一个圆角和背景图片的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>
分享到:
相关推荐
flex的css样式设置,介绍有关flex的各类css样式设置,比如application,panel,hbox等
Canvas、ControlBar、Form、FormHeading、Grid、HBox、HDividedBox ModuleLoader、Panel、Spacer、Tile、TileWindow、VBox、VDividedBox 8、学习 flex + MyEclipse的配置和使用 ...
Extjs4.0学习笔记,以下是部分介绍: xtjs4,创建Ext组件有了新的方式,就是Ext.create(....),而且可以使用动态加载JS的方式来加快组件的渲染,我们再也不必一次加载已经...ExtJS4学习笔记(十)---ExtJS4图片验证码的实现
3.28 节给Hbox 设置背景图片和圆角 3.29 节控制子组件的位置和滚动 第四章文本(121) 4.1节正确的设置一个文本对象的值 4.2节. 将TextInput绑定一个值 4.3节. 创建一个具有文字提示的文本输入框 4.4节. 创建一个合适...
通过使用发光二极管(LED)和$$ {} ^ {90} \ hbox {Sr} $$ Srβ光源在室温和低温下研究了晶体的发光和闪烁特性。 在10 K下的发光和闪烁光的产量明显高于在室温下的发光和闪烁的光的产量。 该晶体在10 K下显示出比...
在学习Flex的过程中,你可能会遇到Flex页面跳转的问题,本文和大家分享一下,页面在flex里面其实就是一个个的Canvas,vbox,hbox等等之类的东西,看到的不同页面的切换,就是这些元素一层层的堆积,或者替换,但是...
$$ \ hbox {Li} _ {2} \ hbox {MoO} _ {4} $$ Li2MoO4和CaMoO $$ _ 4 $$ 4等基于钼的晶体正在成为寻找无中微子的下一代实验的主要候选对象 使用低温量热仪(CUPID,AMoRE)进行双β衰变。 这些晶体的精美能量分辨率...
Flex4.6 通过调用显示:曲线表 var vbox:createChat=new createChat(); var hbox:HBox=vbox.createChats("Day",myArray,expenses); this.addElement(hbox);
我们找不到任何一种模式的证据,并在半衰期上设置了下界:$$ T ^ {0 \ nu __ {0 ^ + _ 1}> 7.9 \ cdot 10 ^ {23} \ hbox {yr} $$ T01 +0ν> 7.9·1023yr和$$ T ^ {2 \ nu __ {0 ^ + _ 1}> 2.4 \ cdot 10 ^ {23} \ ...
ExtJS4学习笔记(二)---HBox的使用 ExtJS4学习笔记(五)---Grid分页 ExtJS4学习笔记(八)---Grid多选 全选 ExtJS4学习笔记(六)---多表头Grid ExtJS4学习笔记(十)---ExtJS4图片验证码的实现 ExtJS4学习笔记(十一)---...
在非弹性pp碰撞中,在$ Rapid \ sqrt {s} = 7 \\ hbox {TeV} $$ s = 7TeV且在p– 对于非单个衍射事件和多重性类,$$ \ sqrt {s _ {\ mathrm {NN}}} = 5.02 \ \ hbox {TeV} $$ sNN = 5.02TeV处的Pb碰撞。 共振通过其...
exjts4 学习笔记源码,源码包含windws,hbox,vbox和Grid的应用,其中grid介绍比较多。下载解压后,部署后就可以使用,所有代码均在demo文件夹下。更多extjs4教程,请关注http://www.mhzg.net
Canvas layout 容器 1 Absolute模式 1 constraint-based模式: 2 Vbox或者Hbox 布局 3 ControlBar layout 容器 4 ApplicationControlBar 容器 6 DividedBox, HDividedBox 和VDividedBox 布局 8...
快速创建MX和Spark组件。 如何使用 在VSCode中安装扩展 打开mxml文件,开始输入组件名称并选择代码段 注意:要在VSCode中创建Flex项目,请安装。 片段 AdvancedDataGrid BorderContainer Box MX Button Spark ...
包含和基准的$$ t \ bar {t} $$ tt制造横截面在lepton + jet通道中使用$ 20.2〜\ hbox {fb} ^ {-1} $$ 20.2fb-1质子进行测量 用大型强子对撞机的ATLAS探测器记录的质子碰撞数据,质心能量为8 TeV。 通过将选定的事件...
使用CERN LHC处的ALICE检测器获得$$ \ hbox {K} / \ pi $$ K /π,$$ \ hbox {p} / \ pi $$ p /π和K / p波动的初步结果。 $$ \ text {Pb--Pb} $$ Pb--Pb在$$ \ sqrt {s_ \ mathrm {{NN}}}上的中心度函数= 2.76 \ ...
<mx:HBox id="columnBox" name="ColumnChart" width="100%"> </mx:HBox> <mx:HBox id="pieBox" name="PieChart" width="100%"> </mx:HBox> <mx:HBox id="lineBox" name="LineChart" width="100...
多亏了$$ \ alpha $$α粒子的出色排斥,我们获得了能量区域中用热探测器测得的最低背景,在该区域中我们搜索$$ ^ {82} \ hbox {Se} $$ 82Se 中微子双β衰变。 在这项工作中,我们开发了一个在整个实验数据能量范围...
layout: { type: 'hbox' }, defaults: { margin: '0 3 0 0', border: false, maxWidth: 300, minWidth: 180, layout: { type: 'form', labelWidth: 30 } } }, items: [{ items: [{ flex: 1, items: ...