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,w,h));?? ?
  
  
????????????graphics.drawRect(0,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="22222"/>?

  
  

????</s:BorderContainer>