flex 中的背景图片平铺

在canvas里面放了背景图片，结果不能实现平铺，找到几种方法解决这个问题：

1 写一个皮肤文件给border（边框）

皮肤：

package
{
    import flash.geom.Rectangle;

    import mx.graphics.BitmapFill;
    import mx.skins.ProgrammaticSkin;
    import flash.text.StyleSheet;

    public class RepeatBackground extends ProgrammaticSkin {
        public function RepeatBackground() {
        }

        override protected function updateDisplayList(w:Number, h:Number):void {
            super.updateDisplayList(w,h);

            graphics.clear();
            var b:BitmapFill = new BitmapFill();
            b.source = getStyle("backgroundImage");;
            b.begin(graphics,new Rectangle(0,0,w,h));
            graphics.drawRect(0,0,w,h);
            b.end(graphics);
        }
    }
}

使用：

mx|Canvas
{
    backgroundImage: Embed(source="assets/bg1.gif");
    border-skin:ClassReference("RepeatBackground");
}

2 使用Group 用重复的背景图片填充 设置fillMode属性：

<s:Group width="100%" height="100%" >
        <s:Rect width="100%" height="100%">
            <s:fill>
                <s:BitmapFill source="@Embed('assets/1111.jpg')" fillMode="repeat"/>
            </s:fill>
        </s:Rect>
    </s:Group>

3  使用BorderContainer 容器 它自带北京图片平铺的属性：

<s:BorderContainer width="100%" height="100%" backgroundImage="@Embed('assets/1111.jpg')" backgroundImageFillMode="repeat">
        <s:Button label="11111"/>
    </s:BorderContainer>