自定义ColorPicker控件

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="350" height="100" creationComplete="drawColorBar()">
    <mx:Script>
        <![CDATA[
            import mx.core.UIComponent;
            import mx.controls.Alert;
       
            private var bmd:BitmapData;
            private var spMouse:Sprite;
           
            [Bindable]
            public var colorSelected:uint = 0xFFFFFF;    // 当前选择的颜色
            public static const COLOR_CHANGED_EVENT:String = "ColorChangedEvent";

            // 画颜色条
            private function drawColorBar():void
            {
                var type:String = GradientType.LINEAR ;
                var color:Array=[0xFF0000, 0xFFFF00, 0x00FF00, 0x00FFFF, 0x0000FF, 0xFF00FF, 0xFF0000];//设置颜色数组
                var alphaAr:Array=[100, 100, 100, 100, 100, 100, 100];//透明度数组
                var rotios:Array= [0x00, 0x2A, 0x55, 0x7F, 0xAA, 0xD4, 0xFF];//偏移量，数组
                var matrix:Matrix =new Matrix()//矩阵       
                matrix.createGradientBox(cavColorBar.width, cavColorBar.height, 0, 0, 0);
                cavColorBar.graphics.beginGradientFill(type,color,alphaAr,rotios,matrix);
                cavColorBar.graphics.drawRect(0,0,cavColorBar.width,cavColorBar.height);
               
                color = [0xffffff, 0xffffff, 0x000000];
                alphaAr = [100, 0, 100];
                rotios = [0x00, 0x77, 0xff];
                matrix.createGradientBox(cavColorBar.width,cavColorBar.height,0.5*Math.PI,0,0);
                cavColorBar.graphics.beginGradientFill(type, color, alphaAr, rotios, matrix);
                cavColorBar.graphics.drawRect(0,0,cavColorBar.width,cavColorBar.height);
               
                bmd = new BitmapData(cavColorBar.width, cavColorBar.height);
                bmd.draw(cavColorBar);
               
                creatMoseSpriet();
            }
           
            // 画鼠标
            private function creatMoseSpriet():void
            {
                spMouse = new Sprite();
                spMouse.graphics.lineStyle(4, 0xffffff);
                spMouse.graphics.drawCircle(0, 0, 6);
                var ui:UIComponent = new UIComponent();
                ui.addChild(spMouse);
                this.addChild(ui);
            }
           
            // 鼠标移动事件
            private function colorChanging(evt:MouseEvent):void
            {
                if (evt.buttonDown)
                {
                    // 移动小圆圈
                    spMouse.x = evt.localX + 2;
                    spMouse.y = evt.localY + 2;
                   
                    // 设置右则Canvas的颜色为当前选中的颜色
                    colorSelected = bmd.getPixel(evt.localX, evt.localY)
                    //cavSelectedColor.setStyle("backgroundColor", colorSelected);
                   
                    // 发送当前选择的颜色
                    var colorChangedEvent:Event = new Event(COLOR_CHANGED_EVENT);
                    dispatchEvent(colorChangedEvent);
                }
            }
        ]]>
    </mx:Script>
    <mx:Canvas y="1" width="32" height="67" right="1" id="cavSelectedColor" backgroundColor="{colorSelected}">
    </mx:Canvas>
    <mx:Canvas x="317" y="67" width="32" height="32" id="cavNoColor">
    </mx:Canvas>
    <mx:Canvas id="cavColorBar" x="0" y="0" width="317" height="100" mouseMove="colorChanging(event)">
    </mx:Canvas>
</mx:Canvas>