Flex colorTranfrom使用说明

这次使用colorTranfrom主要用来将一个已有的过渡颜色映射到其他颜色条。发现这个colorTranfrom很好使用，于是简单研究了下

文档有说明：

使用 ColorTransform 类调整显示对象的颜色值。可以将颜色调整或颜色转换应用于所有四种通道：红色、绿色、蓝色和 Alpha 透明度。

其中颜色透明度的转换公式大致如下：

当 ColorTransform 对象应用于显示对象时，将按如下方法为每个颜色通道计算新值：

• 新红色值 = (旧红色值 * redMultiplier) + redOffset
• 新绿色值 = (旧绿色值 * greenMultiplier) + greenOffset
• 新蓝色值 = (旧蓝色值 * blueMultiplier) + blueOffset
• 新 Alpha 值 = (旧 Alpha 值 * alphaMultiplier) + alphaOffset

如果计算后任何一个颜色通道值大于 255，则该值将被设置为 255。如果该值小于 0，它将被设置为 0。

注意：

1、当设置color属性后，其将会对原位图对象所有颜色映射到当前颜色，只保留其透明度变化效果。

2、每次修改都是在原始位图基础上修改显示结果，并不会对原始位图产生修改。

 

附加：有兴趣的朋友可以研究下bitmapData.paletteMap方法。使用该方法可以对当前矩阵中的整体颜色映射到一个颜色组中，跟colorTranfrom设置color有点相反作用的感觉。

 

给个简单的demo示例：

<?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" minWidth="955" minHeight="600">
	<fx:Script>
		<![CDATA[
			import mx.events.ColorPickerEvent;
			import mx.events.SliderEvent;
			
			protected function slider1_changeHandler(event:SliderEvent):void
			{

				var colorTrans:ColorTransform = new ColorTransform;
				colorTrans.redMultiplier = redMultiplierSlider.value;
				colorTrans.greenMultiplier = greenMultiplierSlider.value;
				colorTrans.blueMultiplier = blueMultiplierSlider.value;
				colorTrans.alphaMultiplier = alphaMultiplierSlider.value;
				
				colorTrans.redOffset = redOffsetSlider.value;
				colorTrans.greenOffset = greenOffsetSlider.value;
				colorTrans.blueOffset = blueOffsetSlider.value;
				colorTrans.alphaOffset = alphaOffsetSlider.value;
				
				imgTarget.transform.colorTransform = colorTrans;
				objTarget.transform.colorTransform = colorTrans;
			}
			
			protected function colorPicker_changeHandler(event:ColorPickerEvent):void
			{
				var colorTrans:ColorTransform = new ColorTransform;
				colorTrans.color = event.color;
				imgTarget.transform.colorTransform = colorTrans;
				objTarget.transform.colorTransform = colorTrans;
			}
			
		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<s:layout>
		<s:VerticalLayout clipAndEnableScrolling="true"/>
	</s:layout>
	<s:Panel width="100%" height="300">
		<s:layout>
			<s:TileLayout horizontalAlign="center" verticalAlign="middle" 
						  rowHeight="60" columnWidth="320" columnAlign="left" rowAlign="top"/>
		</s:layout>
		<s:HGroup>
			<s:Label text="直接使用颜色Color："/>
			<mx:ColorPicker id="colorPicker" change="colorPicker_changeHandler(event)"/>
		</s:HGroup>
		<s:HGroup>
			<s:Label text="红色系数redMultiplier："/>
			<mx:Slider width="150" height="30" id="redMultiplierSlider"  
					   maximum="1" minimum="0" value="1" change="slider1_changeHandler(event)"/>
		</s:HGroup>
		<s:HGroup>
			<s:Label text="绿色系数greenMultiplier："/>
			<mx:Slider width="150" height="30" id="greenMultiplierSlider" maximum="1" minimum="0" value="1" change="slider1_changeHandler(event)"/>
		</s:HGroup>
		<s:HGroup>
			<s:Label text="蓝色系数blueMultiplier："/>
			<mx:Slider width="150" height="30" id="blueMultiplierSlider" maximum="1" minimum="0" value="1" change="slider1_changeHandler(event)"/>
		</s:HGroup>
		<s:HGroup>
			<s:Label text="透明度alphaMultiplier："/>
			<mx:Slider width="150" height="30" id="alphaMultiplierSlider" maximum="1" minimum="0" value="1" change="slider1_changeHandler(event)"/>
		</s:HGroup>
		<s:HGroup>
			<s:Label text="红色偏移redOffset："/>
			<mx:Slider width="150" height="30" id="redOffsetSlider" maximum="255" minimum="-255" value="0" change="slider1_changeHandler(event)"/>
		</s:HGroup>
		<s:HGroup>
			<s:Label text="绿色色偏移greenOffset："/>
			<mx:Slider width="150" height="30" id="greenOffsetSlider" maximum="255" minimum="-255" value="0" change="slider1_changeHandler(event)"/>
		</s:HGroup>
		<s:HGroup>
			<s:Label text="蓝色偏移redOffset："/>
			<mx:Slider width="150" height="30" id="blueOffsetSlider" maximum="255" minimum="-255" value="0" change="slider1_changeHandler(event)"/>
		</s:HGroup>
		<s:HGroup>
			<s:Label text="alpha偏移redOffset："/>
			<mx:Slider width="150" height="30" id="alphaOffsetSlider" maximum="255" minimum="-255" value="0" change="slider1_changeHandler(event)"/>
		</s:HGroup>
	</s:Panel>
	
	<s:Group id="view">
		<s:Image id="imgTarget" source="assets/img_colorTransform.jpg"/>
		
		<s:Group id="objTarget" width="300" height="300" x="500">
			<s:Rect width="100%" height="100%">
				<s:fill>
					<s:RadialGradient>
						<s:entries>
							<s:GradientEntry color="0xff0000" alpha="1" ratio="0"/>
							<s:GradientEntry color="0x00ff00" alpha=".7" ratio=".6"/>
							<s:GradientEntry color="0x0000ff" alpha=".2" ratio="1"/>
						</s:entries>
					</s:RadialGradient>
				</s:fill>
			</s:Rect>
		</s:Group>
	</s:Group>
</s:Application>