AS3 - 动态改变元件的亮度
作者:hangge | 2015-02-04 10:45
Flex开发中,有时需要动态的调整组件的亮度比如变亮些(颜色变浅),变暗些(颜色加深),以此来表示不同的状态。通过as代码可以很方便的实现,其原理就是讲元件的三原色的颜色通道乘以对应的系数。

效果图如下:

代码如下:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="init()"
fontFamily="微软雅黑">
<fx:Script>
<![CDATA[
private function init():void{
adjustBrightness(cav2,1.2);
adjustBrightness(cav3,0.8);
}
/**
* 将可视对象亮度调整
* (即将三原色的颜色通道乘以对应的系数)
*/
public static function adjustBrightness(obj:DisplayObject, brightness:Number):void{
var colorTransformer:ColorTransform = obj.transform.colorTransform;
colorTransformer.redMultiplier = brightness;
colorTransformer.greenMultiplier = brightness;
colorTransformer.blueMultiplier = brightness;
obj.transform.colorTransform = colorTransformer;
}
]]>
</fx:Script>
<s:layout>
<s:HorizontalLayout paddingLeft="50" paddingTop="50"/>
</s:layout>
<s:Group id="cav1" width="100" height="100">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="0x00cc00"/>
</s:fill>
</s:Rect>
<s:Label text="正常"/>
</s:Group>
<s:Group id="cav2" width="100" height="100">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="0x00cc00"/>
</s:fill>
</s:Rect>
<s:Label text="变亮"/>
</s:Group>
<s:Group id="cav3" width="100" height="100">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="0x00cc00"/>
</s:fill>
</s:Rect>
<s:Label text="变暗"/>
</s:Group>
</s:Application>
全部评论(0)