当前位置: > > > AS3 - 动态改变元件的亮度

AS3 - 动态改变元件的亮度

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