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:Cla***eference("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>