flex3的时候,Container是有backgroundImage样式的,直接设置即可。
但在flex4,你发现会告诉你这个样式只在halo主题下才能用,如果不是halo主题,会报错。
放弃使用Canvas吧,使用替代容器BorderContainer。
可以使用backgroundImage指定图片,同时backgroundImageFillMode指定图片的填充方式,其默认值为scale,可用值包括clip(不改变图片)repeat(重复)scale(拉伸)。这个使用比较简单,就不举例了。
但在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>