Flex colorTranfrom使用說明

此次使用colorTranfrom主要用來將一個已有的過渡顏色映射到其餘顏色條。發現這個colorTranfrom很好使用，因而簡單研究了下

文檔有說明：

使用 ColorTransform 類調整顯示對象的顏色值。能夠將顏色調整或顏色轉換應用於全部四種通道：紅色、綠色、藍色和 Alpha 透明度。

其中顏色透明度的轉換公式大體以下：

當 ColorTransform 對象應用於顯示對象時，將按以下方法爲每一個顏色通道計算新值：

• 新紅色值 = (舊紅色值 * redMultiplier) + redOffset
• 新綠色值 = (舊綠色值 * greenMultiplier) + greenOffset
• 新藍色值 = (舊藍色值 * blueMultiplier) + blueOffset
• 新 Alpha 值 = (舊 Alpha 值 * alphaMultiplier) + alphaOffset

若是計算後任何一個顏色通道值大於 255，則該值將被設置爲 255。若是該值小於 0，它將被設置爲 0。

注意：

一、當設置color屬性後，其將會對原位圖對象全部顏色映射到當前顏色，只保留其透明度變化效果。

二、每次修改都是在原始位圖基礎上修改顯示結果，並不會對原始位圖產生修改。

 

附加：有興趣的朋友能夠研究下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>