flex4设置背景图片
发布时间:2020-12-15 04:33:16 所属栏目:百科 来源:网络整理
导读:flex3的时候,Container是有backgroundImage样式的,直接设置即可。? 但在flex4,你发现会告诉你这个样式只在halo主题下才能用,如果不是halo主题,会报错。? 放弃使用Canvas吧,使用替代容器BorderContainer。? 可以使用backgroundImage指定图片,同时backg
flex3的时候,Container是有backgroundImage样式的,直接设置即可。?
但在flex4,你发现会告诉你这个样式只在halo主题下才能用,如果不是halo主题,会报错。? 放弃使用Canvas吧,使用替代容器BorderContainer。? 可以使用backgroundImage指定图片,同时backgroundImageFillMode指定图片的填充方式,其默认值为scale,可用值包括clip(不改变图片)repeat(重复)scale(拉伸)。这个使用比较简单,就不举例了。? 另外,可以使用backgroundFill来指定背景,可以使用实现IFill接口的类作为参数,常见IFill的实现类有BitmapFill(图片),LinearGradient(线性渐变),RadialGradient(发射形渐变),SolidColor(单颜色)。下面示例是图片作为背景,其中fillMode与backgroundImageFillMode是一样的。
<s:BorderContainer width="400" height="300"> <s:backgroundFill> <s:BitmapFill source="@Embed('/test.png')" fillMode="repeat"/> </s:backgroundFill> </s:BorderContainer> 接下来的例子演示了Flex 4中如何通过BitmapFill和LinearGradient,给Panel设置bitmap填充背景色。
<?xml version="1.0" encoding="utf-8"?> <s:Application name="Spark_Panel_fill_BitmapFill_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flash.com/article/flex' target='_blank'>flex/spark" xmlns:mx="library://ns.adobe.com/flash.com/article/flex' target='_blank'>flex/halo"> <mx:ApplicationControlBar width="100%" cornerRadius="0"> <mx:Form styleName="plain"> <mx:FormItem label="rotation:"> <s:HSlider id="rotationSlider" minimum="-360" maximum="360" value="90" liveDragging="true" width="{pnl.width}" /> </mx:FormItem> <mx:FormItem label="ratio:"> <s:HSlider id="ratioSlider" minimum="0.0" maximum="1.0" value="0.2" valueInterval="0.05" liveDragging="true" width="{pnl.width}" /> </mx:FormItem> </mx:Form> </mx:ApplicationControlBar> <s:Panel id="pnl" title="Spark Panel title" width="320" height="240" horizontalCenter="0" verticalCenter="0"> <s:Rect width="100%" height="100%"> <s:fill> <s:BitmapFill source="@Embed('assets/pattern_140.gif')" /> </s:fill> </s:Rect> <s:Rect width="100%" height="100%"> <s:fill> <s:LinearGradient rotation="{rotationSlider.value}"> <s:GradientEntry color="white" alpha="0.0" ratio="0.0" /> <s:GradientEntry color="#F0EBD2" alpha="1.0" ratio="{ratioSlider.value}" /> </s:LinearGradient> </s:fill> </s:Rect> <s:TextArea id="textArea" verticalScrollPolicy="on" left="20" right="20" top="20" bottom="20"> <s:text>The quick brown fox jumps over the lazy dog.</s:text> </s:TextArea> </s:Panel> </s:Application> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |