[2011-04-19]Flex程序实现背景贴图的两种方式

Flex程序实现背景贴图的两种方式 Two ways to implement sexy background/border for containers
六, 08/02/2008 - 00:14 — lw0110 
Flex有着对CSS很好的支持，使得我们有更多的选择来进行背景贴图的操作。从而使程序变得更吸引人。在这里写下我常用得两个方法。

1. CSS法 
CSS贴图方法，是在CSS的样式代码中，填入要做背景图片的路径。然后在AS3代码，或者MXML标签中去引用定义好的样式。 
下面这段CSS代码利用的九宫格的原理来拉深背景图片 background.png，对背景进行了设置。 

.loginWindow{ 
      background-image: Embed("/assets/background.png", 
      scaleGridLeft="10", 
      scaleGridRight="300", 
      scaleGridTop="20", 
      scaleGridBottom="400"); 
      background-size: "100%"; 
} 

我们在AS3代码，或者MXML标签中再去引用这个样式，就会改变默认的背景去我们这个background.png图片。 

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="370" height="222" styleName="loginWindow"> 




2. AS3代码法 
package com.chestnut.view 
{ 
    import flash.display.Bitmap; 
    import flash.display.BitmapData; 
    import mx.skins.RectangularBorder;

      public class MetalBackground extends RectangularBorder 
      { 
         [Embed(source='./assets/background.png')] 
         private var backgroundImageClass:Class; 
         private var backgroundBitmapData:BitmapData;

         public function MetalBackground() 
         { 
             super(); 
             var backgroundImage:Bitmap = new backgroundImageClass(); 
             backgroundBitmapData = new BitmapData(backgroundImage.width,backgroundImage.height); 
             backgroundBitmapData.draw(backgroundImage); 
         } 

         override protected function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number ):void 
         { 
            super.updateDisplayList(unscaledWidth,unscaledHeight ); 
            var cornerRadius:Number = getStyle("cornerRadius"); 
            graphics.clear(); 
            graphics.beginBitmapFill( backgroundBitmapData ); 
            graphics.drawRoundRectComplex(0,0,unscaledWidth,unscaledHeight,cornerRadius,cornerRadius,cornerRadius,cornerRadius ); 
            graphics.endFill(); 
         } 
      } 
}

这里，我们定义了一个可以用作borderSkin的类，之后我们在MXML中引用，如下

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="800" height="600" borderSkin="com.chestnut.view.MetalBackground">

也可以达到和CSS方法同样的效果。

但是我们可以看出区别，

1. CSS方法背景的边框，阴影的效果，要在绘图软件里面做好。而代码法不用，其背景图可以是很小的一个图片。边框，阴影效果可以用代码来实现。

2. CSS的方法要遵循九宫格拉深的原理，而代码法就不用。代码法有点像网页中的repeat-x, repeat-y的原理，这个方法不会拉伸原图。

3. 代码法实现的时候，如其名，代码量稍微多谢。

评论

1 楼 zhong_pro 2011-12-05  

LZ是不是还有一种使用spark的fill,设置

<s:backgroundFill>  
			<s:BitmapFill  id="bgMain" fillMode="scale" source="@Embed('assets/bg2.jpg')"/> 
		</s:backgroundFill>