Flex中转化以及格式化颜色值的例子

By Minidxer | July 21, 2008

接下来的例子演示了Flex中如何将颜色的值转化为字符串，根据RGB计算出各个值以及格式化颜色值。

让我们先来看一下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="middle"
  5.         backgroundColor="white">
  6.  
  7.     <mx:Script>
  8.         <![CDATA[
  9.             private function fixedInt(value:int, mask:String):String {
  10.                 return String(mask + value.toString(16)).substr(-mask.length).toUpperCase();
  11.             }
  12.  
  13.             private function rChannel(value:int):int {
  14.                 return value >> 16 & 0xFF;
  15.             }
  16.  
  17.             private function gChannel(value:int):int {
  18.                 return value >> 8 & 0xFF;
  19.             }
  20.  
  21.             private function bChannel(value:int):int {
  22.                 return value >> 0 & 0xFF;
  23.             }
  24.  
  25.             private function rgbToInt(r:int, g:int, b:int):int {
  26.                 return r << 16 | g << 8 | b << 0;
  27.             }
  28.         ]]>
  29.     </mx:Script>
  30.  
  31.     <mx:Model id="colorObj">
  32.         <root>
  33.             <color>{colorPicker.selectedColor}</color>
  34.             <red>{rChannel(colorObj.color)}</red>
  35.             <green>{gChannel(colorObj.color)}</green>
  36.             <blue>{bChannel(colorObj.color)}</blue>
  37.         </root>
  38.     </mx:Model>
  39.  
  40.     <mx:Form>
  41.         <mx:FormItem label="Color:" direction="horizontal">
  42.             <mx:ColorPicker id="colorPicker" />
  43.             <mx:Label text="0x{fixedInt(colorPicker.selectedColor, '000000')}" width="100" />
  44.         </mx:FormItem>
  45.         <mx:FormItem label="Red:" direction="horizontal">
  46.             <mx:Label text="{colorObj.red}" />
  47.             <mx:Label text="(0x{fixedInt(colorObj.red, '00')})" />
  48.         </mx:FormItem>
  49.         <mx:FormItem label="Green:" direction="horizontal">
  50.             <mx:Label text="{colorObj.green}" />
  51.             <mx:Label text="(0x{fixedInt(colorObj.green, '00')})" />
  52.         </mx:FormItem>
  53.         <mx:FormItem label="Blue:" direction="horizontal">
  54.             <mx:Label text="{colorObj.blue}" />
  55.             <mx:Label text="(0x{fixedInt(colorObj.blue, '00')})" />
  56.         </mx:FormItem>
  57.         <mx:FormItem label="Color:" direction="horizontal">
  58.             <mx:Label text="{colorObj.color}" />
  59.             <mx:Label text="(0x{fixedInt(rgbToInt(colorObj.red, colorObj.green, colorObj.blue), '000000')})" />
  60.         </mx:FormItem>
  61.     </mx:Form>
  62.  
  63.     <mx:Label text="{int(0xFF00FF)}" />
  64.  
  65. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：minidxer

Topics: Flex | Tags: , , ,

Related Post

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll

Sponsored Ads