Flex程序实现背景贴图的两种方式 Two ways to implement sexy background/border for containers

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. 代码法实现的时候，如其名，代码量稍微多些。