flex4设置背景图片

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>