Flex中利用ColorUtil类调节颜色亮度的例子

By Minidxer | August 2, 2008

接下来的例子演示了Flex中如何利用ColorUtil类来调节颜色的亮度。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整实现代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="top"
  5.         backgroundColor="white"
  6.         creationComplete="changeColorChip()">
  7.  
  8.     <mx:Script>
  9.         <![CDATA[
  10.             import mx.utils.ColorUtil;
  11.  
  12.             private function changeColorChip():void {
  13.                 /* ColorUtil.adjustBrightness() takes a bright
  14.                     parameter between -255 and +255. */
  15.                 brite1 = slider.value;
  16.                 /* ColorUtil.adjustBrightness2() takes a bright
  17.                     parameter between -100 and +100. */
  18.                 brite2 = int(slider.value / 255 * 100);
  19.  
  20.                 var adjustedColor1:uint = ColorUtil.adjustBrightness(rgb, brite1);
  21.                 var adjustedColor2:uint = ColorUtil.adjustBrightness2(rgb, brite2);
  22.  
  23.                 colorStr1 = rgbToHex(adjustedColor1);
  24.                 box1.setStyle("backgroundColor", adjustedColor1);
  25.  
  26.                 colorStr2 = rgbToHex(adjustedColor2);
  27.                 box2.setStyle("backgroundColor", adjustedColor2);
  28.             }
  29.  
  30.             private function rgbToHex(value:uint):String {
  31.                 var str:String = value.toString(16).toUpperCase();
  32.                 str = String("000000" + str).substr(-6);
  33.                 return str;
  34.             }
  35.  
  36.             private function reset():void {
  37.                 colorPicker.selectedIndex = 0;
  38.                 slider.value = 0;
  39.                 changeColorChip();
  40.             }
  41.         ]]>
  42.     </mx:Script>
  43.  
  44.     <mx:Number id="rgb">{colorPicker.selectedColor}</mx:Number>
  45.     <mx:Number id="brite1" />
  46.     <mx:Number id="brite2" />
  47.     <mx:String id="colorStr1" />
  48.     <mx:String id="colorStr2" />
  49.     <mx:String id="lbl1">adjustBrightness(0x{rgbToHex(rgb)}, {brite1}) = 0x{colorStr1}</mx:String>
  50.     <mx:String id="lbl2">adjustBrightness2(0x{rgbToHex(rgb)}, {brite2}) = 0x{colorStr2}</mx:String>
  51.  
  52.     <mx:ApplicationControlBar dock="true">
  53.         <mx:Label text="RGB:" />
  54.         <mx:ColorPicker id="colorPicker"
  55.                 change="changeColorChip()" />
  56.  
  57.         <mx:Spacer width="20" />
  58.  
  59.         <mx:Label text="Brightness:" />
  60.         <mx:HSlider id="slider"
  61.                 minimum="-255"
  62.                 maximum="255"
  63.                 value="0"
  64.                 liveDragging="true"
  65.                 snapInterval="1"
  66.                 tickInterval="5"
  67.                 dataTipPrecision="0"
  68.                 width="100%"
  69.                 change="changeColorChip()" />
  70.  
  71.         <mx:Spacer width="20" />
  72.  
  73.         <mx:Button label="Reset"
  74.             click="reset()" />
  75.     </mx:ApplicationControlBar>
  76.  
  77.     <mx:HBox width="100%" height="100%">
  78.         <mx:VBox width="50%" height="100%">
  79.             <mx:Label text="{lbl1}"
  80.                 selectable="true" />
  81.             <mx:Box id="box1"
  82.                     width="100%"
  83.                     height="100%" />
  84.         </mx:VBox>
  85.  
  86.         <mx:VBox width="50%" height="100%">
  87.             <mx:Label text="{lbl2}"
  88.                 selectable="true" />
  89.             <mx:Box id="box2"
  90.                     width="100%"
  91.                     height="100%" />
  92.         </mx:VBox>
  93.     </mx:HBox>
  94.  
  95. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Flex | No Comments » | Tags: , , , ,

你可能还对下列文章感兴趣:

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll