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

1 写一个皮肤文件给border(边框)

皮肤:

 
  
  1. package  
  2. {    
  3.     import flash.geom.Rectangle;    
  4.     
  5.     import mx.graphics.BitmapFill;    
  6.     import mx.skins.ProgrammaticSkin;    
  7.     import flash.text.StyleSheet;  
  8.     
  9.     public class RepeatBackground extends ProgrammaticSkin {    
  10.         public function RepeatBackground() {  
  11.         }  
  12.  
  13.         override protected function updateDisplayList(w:Number, h:Number):void {    
  14.             super.updateDisplayList(w,h);    
  15.               
  16.             graphics.clear();  
  17.             var b:BitmapFill = new BitmapFill();    
  18.             b.source = getStyle("backgroundImage");;    
  19.             b.begin(graphics,new Rectangle(0,0,w,h));    
  20.             graphics.drawRect(0,0,w,h);    
  21.             b.end(graphics);    
  22.         }    
  23.     }  
  24. }   

使用:

 
  
  1. mx|Canvas  
  2. {  
  3.     backgroundImage: Embed(source="assets/bg1.gif");   
  4.     border-skin:Cla***eference("RepeatBackground");  

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

 
  
  1. <s:Group width="100%" height="100%" > 
  2.         <s:Rect width="100%" height="100%"> 
  3.             <s:fill> 
  4.                 <s:BitmapFill source="@Embed('assets/1111.jpg')" fillMode="repeat"/>   
  5.             </s:fill> 
  6.         </s:Rect> 
  7.     </s:Group> 

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

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