colorPicker组件学习

colorpicker控件使用

指南

概述

的理解  

Colorpicker组件用来定义一个颜色选择器，在默认情况下，colorpicker组件提供了216中颜色供用户选择。

 

的继承关系

 colorPicker—>ComboBase—>UIcomponent—>FlexSprite—>Sprite—>DisolayObjectContainer—>  InteractiveObject—>DisplayObject—>EventDispatcher —>object
UIComponent—>ComboBase

UIComponent—>ComboBase—>colorPicker

UIComponent—>ComboBase—>comboBox

UIComponent—>ComboBase—>DateField

参考文献：Adobe® Flex® 4.1 语言参考

常用属性和方法

 

名称	分类	说明
showTextField	属性	颜色的数字显示与否（true/ false）
Selectedcolor	属性	对象中当前所选择的值
	属性	可以提供自选颜色（详见3,2）
labelField	属性	dataProveder Array的对象中的字段名称，该字段中包含要在SwatchPannel对象文本框中作为标签显示的文本（详见3.5）
colorField	属性	dataProvider Array的对象中的字段名称，该字段用于指定样本面板显示的十六进制颜色值（详见3.4）
Change	事件	当所选颜色由于用户交互操作而发生更改时分派（详见3.3）
Enter	事件	如果可编辑的colorPicker属性设置为true，则当用户在按下enter键时分派

的使用方法

属性的使用方法

功能：设置ColorPicker内的文本框(颜色的数字表示)显示与否。

代码：

  x="217" y="52" width="250" height="200" title="colorpicker">

       id="cp" showTextField="true" selectedColor="0xffffff" x="113" y="33"/>

       x="54" y="38" text="选择颜色" height="22"/>

       x="24" y="72" text="选择的颜色为：" height="22"/>

          color="{cp.selectedColor}" text="0x{cp.selectedColor.toString(16)}"  x="110" y="68" width="100" />

   

注意：当showTextField=“true”时

演示效果如下：true.html

     当showTextField=“false”时

演示效果如下：false.html

               

代码详见：colorpicker.mxml

自定义colorpicker中可供选择的颜色

   通过Array对象，存取colorpicker组件的dataprivider属性的值。

代码：

   

           import mx.events.DropdownEvent;

           [Bindable]

           public var colors:Array=[{label:"Nave Blue", color:"0x000066"},

              {label:"Yellow", color:"0xFFFF00"},

              {label:"Gold", color:"0xFFD700"},

               {label:"orangeRed",color:"0xFF4500"}];

        

       ]]>

  id="cp" dataProvider="{colors}" showTextField="true" selectedColor="0xFFFFFF" x="115" y="44"/>

演示效果如下：

       colorpicker1.html

代码详见：zidingyi.mxml

事件的举例

功能：为用户提供一个用来选取颜色的调色板。并且使用ColorPicker 控件的change 事件来设定Canvas 的背景颜色。

代码如下：

函数：

private function setColor(evt:ColorPickerEvent):void

       {

       cnv.setStyle("backgroundColor",evt.color); }

       ]]>

自定义：

Canvas id="cnv" width="450" height="450"

              backgroundColor="#eeaeaea" >

       id="pckr" right="10" top="10"

                     change="setColor(event)"/>

：

演示效果如下：

colorpicker3.html

代码详见：colorpicker1.mxml

参考文献

        Flex 3cookbook中文版（2.3章节）

属性的举例

  如果dataProvider对象不包含颜色字段则将colorField属性设置为使用正确的字段名称。它的默认为color。

例子：

   

           import mx.events.DropdownEvent;

           [Bindable]

           public var colors:Array=[{label:"Nave Blue", color:"0x000066"},

              {label:"Yellow", color:"0xFFFF00"},

              {label:"Gold", color:"0xFFD700"},

               {label:"orangeRed",color:"0xFF4500"}];

        

       ]]>

如果这样定义颜色则后面的定义colorPicker时必须写上colorField属性  id="cp" dataProvider="{colors}" colorField="colo" ，

而如果你直接定义成public var colors:Array=[{label:"Nave Blue", color:"0x000066"},

              {label:"Yellow", color:"0xFFFF00"},

定义为color名：则定义colorPicker时无需写上colorField属性，因为它的默认为color提供。

 

属性的举例

如果dataProvider对象不包含标签字段则将labelField属性设置为使用正确的字段名称

例子：

   

           import mx.events.DropdownEvent;

           [Bindable]

           public var colors:Array=[{label:"Nave Blue", color:"0x000066"},

              {label:"Yellow", color:"0xFFFF00"},

              {label:"Gold", color:"0xFFD700"},

               {label:"orangeRed",color:"0xFF4500"}];

        

       ]]>

如果这样定义颜色则后面的定义colorPicker时必须写上colorField属性  id="cp" dataProvider="{colors}" labelField="ad"，

而如果你直接定义成public var colors:Array=[{label:"Nave Blue", color:"0x000066"},

              {label:"Yellow", color:"0xFFFF00"},

定义为color名：则定义colorPicker时无需写上colorField属性，因为labelField属性的默认为label提供。

 

 

 

 

声明：如果有人需要详细代码请留言联系本人！！