Flex程序实现背景贴图的两种方式 Two ways to implement sexy backg

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图片。


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中引用,如下

也可以达到和CSS方法同样的效果。
但是我们可以看出区别,
1. CSS方法背景的边框,阴影的效果,要在绘图软件里面做好。而代码法不用,其背景图可以是很小的一个图片。边框,阴影效果可以用代码来实现。
2. CSS的方法要遵循九宫格拉深的原理,而代码法就不用。代码法有点像网页中的repeat-x, repeat-y的原理,这个方法不会拉伸原图。
3. 代码法实现的时候,如其名,代码量。

你可能感兴趣的:(flex)