Flex:Flex背景的渐变（二）

最新推荐文章于 2022-08-10 17:54:25 发布

Winters_huang

最新推荐文章于 2022-08-10 17:54:25 发布

阅读量2k

点赞数

文章标签： flex application matrix styles encoding containers

本文链接：https://blog.csdn.net/huanghr_1/article/details/6567709

版权

下面说说第二种方法，来自互联网，实现左右，上下方向渐变。这两种方法都是flex 3实现的，有没有Flex 4的呢？

---------------------------------------------------------------------

这是个非常基本的需求，但是Flex只在Application这个东东上提供了backgroundGradientColors这个属性来作背景渐变。其他容器例如Panel，HBox之类的一概没有。网上一堆这样的问题和解决方法。当然都是自己去画背景了。

这个例子： http://butterfliesandbugs.wordpress.com/2007/06/08/generic-background-gradient-for-containers/。

这个例子本身是有问题的，不过只需要修改3个小地方即可：

（1）把measuredWidth和 measuredHeight去掉。

（2）把style里的backgroundImage: ClassReference("GradientBackground");改成

border-skin: ClassReference("GradientBackground");

（3）把updateDisplayList的第一句加上graphics.clear(); 否则背景会越来越多。

它支持多个属性，这里解释一下：

fillColors：这个很容器理解，就是渐变的起止颜色。是个数组 [colorA,colorB]

fillAlphas: 这个是说填充的透明度，1是完全不透明，0是完全透明

gradientType：这是说怎样的渐变，模式是线性渐变

angle：这是说渐变的方向，0是从左到右，180是从右大左，90是从上到下。可以看这里了解更多：http://livedocs.adobe.com/flex/3/html/help.html?content=Drawing_Vector_Graphics_6.html

focalPointRatio：这个我还没用上，搞不懂。

Generic Background Gradient for Containers
A customer submitted a bug this week requesting an easy way to use background gradients in our containers like VBox, HBox, etc. This sounded like a great request and I was surprised that we didn’t already offer this in the framework. I logged the bug as bug SDK-111200 and sought the help of our developer Glenn who is the master of all things styles, skins and themes. Glenn offered the simple solution of using a style we already have called applicationControlBar. Here is an example where you can control the hightlights, colors and alphas of the gradient:
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” backgroundColor=”white”>
<mx:Style>
.gradientBackground { borderStyle: applicationControlBar; fillColors: #EEEEFF, #8888AA; fillAlphas: 0.7, 0.7; highlightAlphas: 0, 0; }
</mx:Style>
<mx:VBox styleName=”gradientBackground” width=”300″ height=”300″ /> </mx:Application>
This worked great. However, the customer came back to tell me that this style shifted all of the components in the container by one pixel. Apparently, this is because the applicationControlBar style has a default 1 pixel border. Oh well. So, if someone wants a simple gradient, and doesn’t care about that one pixel border, use the code above.
However, Glenn came up with an even better solution. I have to repeat, all of these solutions were kindly provided by Glenn Ruehle. I was just the messenger in this transaction with the customer. Glenn went ahead and created a custom gradient class that you can use on any container and control the gradientType, fillColors, fillAlphas, angle, and focalPointRatio of the style. Here is what it looks like:
Here is the code for this simple Application:
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” backgroundColor=”white” width=”200″ height=”1<mce:script type="text/javascript" src="http://hi.images.csdn.net/js/blog/tiny_mce/themes/advanced/langs/zh.js" mce_src="http://hi.images.csdn.net/js/blog/tiny_mce/themes/advanced/langs/zh.js"></mce:script><mce:script type="text/javascript" src="http://hi.images.csdn.net/js/blog/tiny_mce/plugins/syntaxhl/langs/zh.js" mce_src="http://hi.images.csdn.net/js/blog/tiny_mce/plugins/syntaxhl/langs/zh.js"></mce:script>70″ >
<mx:Style>
.gradientBackground1 {
backgroundImage: ClassReference(“GradientBackground”);
backgroundSize: “100%”;
fillColors: #EEEEEE, #999999;
fillAlphas: 0.5, 0.5;
}
.gradientBackground2 {
backgroundImage: ClassReference(“GradientBackground”);
backgroundSize: “100%”;
gradientType: radial;
fillColors: #FFCC33, #999999;
fillAlphas: 0.2, 0.5;
angle: 210;
focalPointRatio: 0.75;
}
</mx:Style>
<mx:VBox styleName=”gradientBackground1″ width=”100″ height=”50″ />
<mx:VBox styleName=”gradientBackground2″ width=”100″ height=”50″ />
</mx:Application>
And, here is Glenn’s code for the gradient background style:
package
{
import mx.skins.ProgrammaticSkin;
import flash.geom.Matrix;
public class GradientBackground extends ProgrammaticSkin
{
override public function get measuredWidth():Number
{
return 20;
}
override public function get measuredHeight():Number
{
return 20;
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
var fillColors:Array = getStyle(“fillColors”);
var fillAlphas:Array = getStyle(“fillAlphas”);
var gradientType:String = getStyle(“gradientType”);
var angle:Number = getStyle(“angle”);
var focalPointRatio:Number = getStyle(“focalPointRatio”);
// Default values, if styles aren’t defined
if (fillColors == null)
fillColors = [0xEEEEEE, 0x999999];
if (fillAlphas == null)
fillAlphas = [1, 1];
if (gradientType == “” || gradientType == null)
gradientType = “linear”;
if (isNaN(angle))
angle = 90;
if (isNaN(focalPointRatio))
focalPointRatio = 0.5;
var matrix:Matrix = new Matrix();
matrix.createGradientBox(unscaledWidth, unscaledHeight, angle * Math.PI / 180);
graphics.beginGradientFill(gradientType, fillColors, fillAlphas, [0, 255] , matrix, “pad”, “rgb”, focalPointRatio);
graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
graphics.endFill();
}
}
}

http://www.richinternet.de/blog/index.cfm?mode=month&month=11&year=2006，这里有另外一个例子，代码原理都一样。

原文出处：http://linmingren2003.blog.163.com/blog/static/56751003201041195949175/