Flex 3 cookbook: 2.3 用ColorPicher设置Canvas的颜色

 

2.3 用 ColorPicher 设置 Canvas 的颜色

2.3.1 问题

你打算让用户用一个颜色选择器改变一个组件的颜色

2.3.2 解答

用颜色选择器给用户提供一个调色板以供选择，用 ColorPicker 组件的 change 事件来设置 canvas 的背景色。

2.3.3 讨论

创建一个应用，让用户能访问 ColorPicker 控件的调色板，改变一个 Canvas 控件的背景色。 ColorPicker 控件提供了一种途径，让用户从颜色样本中选择一个颜色。 ColorPicker 组件的 change 事件与 setColor 方法关联在一起， setColor 方法接受一个 ColorPickerEvent 对象作为一个参数。这个 ColorPickerEvent 对象包含了在 ColorPicker 组件的调色板中当前被选中的颜色的信息。请看如下的代码：

 

<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="vertical">

    <mx:Canvas id="cnv" width="450" height="450"
                 backgroundColor="#eeaeaea">
        <mx:ColorPicker id="pckr" right="10" top="10"
                 change="setColor(event)"/>
    </mx:Canvas>

    <mx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;

            private function setColor(evt:ColorPickerEvent):void
                  {
                cnv.setStyle("backgroundColor",evt.color); }
        ]]>
    </mx:Script>
</mx:Application>

 

 

当用户选择了一个新的颜色， Canvas 的 backgroundColor 样式就被更新了。注意，因为 backgroundColor 是一个样式属性，而不是 Canvas 控件的属性，所以我们使用 setStyle 方法来更新该样式：

 

private function setColor(evt:ColorPickerEvent):void
      {
        cnv.setStyle("backgroundColor",evt.color); }