用Flash MX 2004自制调色版和配色组件（三）

王咏刚，2005年4月

我做的这个调色版和配色组件实际上是由两个组件组成的。最基本的是一个包含HSB色环的调色版组件，然后在外面包装了一个颜色按钮组件。

调色版组件对应于ColorPicker类，下面是该类的代码：

import mx.core.UIComponent;
import mx.controls.TextInput;
import mx.controls.Label;
import wix.*;

[IconFile("ColorPicker.png")]
[InspectableList("color", "visible", "enabled")]
[Event("change")]
class wix.ColorPicker extends UIComponent
{
 static var version:String = "1.0.0";
 static var symbolName:String = "ColorPicker";
 static var symbolOwner:Object = Object(wix.ColorPicker);
 var className:String = "ColorPicker";
 
 private static var LABEL_COLOR = "0x000000";
 private static var TEXTINPUT_COLOR = "0x000000";
 private static var LABEL_LEFT = 260;
 private static var TEXTINPUT_LEFT = 280;
 private static var TEXTINPUT_WIDTH = 40;
 private static var TEXTINPUT_HEIGHT = 22;
 private static var LINE_HEIGHT = 28;
 private static var LINE_TOP = 8;
 private static var LINE_MARGIN = 8;
 
 private var curDepth = 900;
 
 private var H:Number = 0;
 private var S:Number = 0;
 private var B:Number = 0;
 private var r:Number = 0;
 private var g:Number = 0;
 private var b:Number = 0;

 private var tray:MovieClip;
 private var wheel:ColorWheel;
 private var tube:ColorTube;
 private var wheelMask:MovieClip;
 private var wheelStick:MovieClip;
 private var tubeStick:MovieClip;

 private var ringPointer:MovieClip;
 private var trianglePointer:MovieClip;
 
 private var labelColorValue:Label;
 private var txtHue:TextInput;
 private var txtSaturation:TextInput;
 private var txtBrightness:TextInput;
 
 private var txtRed:TextInput;
 private var txtGreen:TextInput;
 private var txtBlue:TextInput;
 
 private var listener1:Object;
 private var listener2:Object;
 
 private var _color:Number = 0x000000;
 [Inspectable(defaultValue=0x000000, type="Color")]
 public function get color():Number {
  return _color;
 }
 public function set color(newColor:Number) {
  if (enabled) {
   _color = ColorMan.toInteger(newColor, 0, 0xFFFFFF);
   setRGBValue(_color);
  }
 }
 
 public function enable(b:Boolean) {
  this.enabled = b;
  wheel.enabled = b;
  tube.enabled = b;
  txtHue.enabled = b; txtSaturation.enabled = b; txtBrightness.enabled = b;
  txtRed.enabled = b; txtGreen.enabled = b; txtBlue.enabled = b;
 }
 
 function init(Void):Void {
  super.init();  
 }
 
 function size(Void):Void {
  super.size();
 }
 
 function draw(Void):Void {
  super.draw();
 }
 
 public function createMovieClip(linkageName:String, id:String,
         x:Number, y:Number):Void {
  var o = createObject(linkageName, id, curDepth++);
  o._x = x; o._y = y;
 }
 
 public function createComponent(linkageName:String, id:String,
         x:Number, y:Number,
         Number, height:Number,
         theText:String, theColor:Number,
         theTabIndex:Number):Void {
  var o = createObject(linkageName, id, curDepth++);
  o._x = x; o._y = y;
  if (width != null && height != null) o.setSize(width, height);
  if (theText != null) o.text = theText;
  if (theColor != null) o.setStyle("color", theColor); 
  if (theTabIndex != null) o.tabIndex = theTabIndex;
 }
 
 public function createChildren(Void):Void
 {
  super.createChildren();
  
  createMovieClip("Tray", "tray", 0, 0);
  createMovieClip("ColorWheelMask", "wheelMask", 8, LINE_TOP);
  createMovieClip("ColorWheel", "wheel", 8, LINE_TOP);
  createMovieClip("Stick", "wheelStick", 8 + wheel._width / 2, 8 + wheel._height / 2);
  createMovieClip("RingPointer", "ringPointer", 0, 0);
  createMovieClip("ColorTube", "tube", 220, LINE_TOP);
  createMovieClip("Stick", "tubeStick", 221, 0); tubeStick._width = 20;
  createMovieClip("TrianglePointer", "trianglePointer", 241, 0);
  
  wheel.init(ringPointer, wheelMask);
  tube.init(trianglePointer);
  
  createComponent("Label", "labelColorValue", 
      LABEL_LEFT, LINE_TOP + 2,
      null, null, "Hex: #FFFFFF", LABEL_COLOR, null);

  createComponent("Label", "labelHue",
      LABEL_LEFT, LINE_TOP + LINE_HEIGHT + 2, 
      null, null, "H:", LABEL_COLOR, null);
  createComponent("Label", "labelSaturation",
      LABEL_LEFT, LINE_TOP + LINE_HEIGHT * 2 + 2,
      null, null, "S:", LABEL_COLOR, null);
  createComponent("Label", "labelBrightness",
      LABEL_LEFT, LINE_TOP + LINE_HEIGHT * 3 + 2,
      null, null, "B:", LABEL_COLOR, null);
  
  createComponent("TextInput", "txtHue",    
      TEXTINPUT_LEFT, LINE_TOP + LINE_HEIGHT, 
      TEXTINPUT_WIDTH, TEXTINPUT_HEIGHT,
      null, TEXTINPUT_COLOR, 1);
  createComponent("TextInput", "txtSaturation",  
      TEXTINPUT_LEFT, LINE_TOP + LINE_HEIGHT * 2, 
      TEXTINPUT_WIDTH, TEXTINPUT_HEIGHT,
      null, TEXTINPUT_COLOR, 2);
  createComponent("TextInput", "txtBrightness",  
      TEXTINPUT_LEFT, LINE_TOP + LINE_HEIGHT * 3, 
      TEXTINPUT_WIDTH, TEXTINPUT_HEIGHT,
      null, TEXTINPUT_COLOR, 3);
  
  createComponent("Label", "labelRed",  
      LABEL_LEFT, LINE_TOP + LINE_HEIGHT * 4 + LINE_MARGIN + 2,  
      null, null, "R:", LABEL_COLOR, null);
  createComponent("Label", "labelGreen",  
      LABEL_LEFT, LINE_TOP + LINE_HEIGHT * 5 + LINE_MARGIN + 2,  
      null, null, "G:", LABEL_COLOR, null);
  createComponent("Label", "labelBlue",  
      LABEL_LEFT, LINE_TOP + LINE_HEIGHT * 6 + LINE_MARGIN + 2,  
      null, null, "B:", LABEL_COLOR, null);
  
  createComponent("TextInput", "txtRed",  
      TEXTINPUT_LEFT, LINE_TOP + LINE_HEIGHT * 4 + LINE_MARGIN, 
      TEXTINPUT_WIDTH, TEXTINPUT_HEIGHT,
      null, TEXTINPUT_COLOR, 4);
  createComponent("TextInput", "txtGreen",  
      TEXTINPUT_LEFT, LINE_TOP + LINE_HEIGHT * 5 + LINE_MARGIN, 
      TEXTINPUT_WIDTH, TEXTINPUT_HEIGHT,
      null, TEXTINPUT_COLOR, 5);
  createComponent("TextInput", "txtBlue",  
      TEXTINPUT_LEFT, LINE_TOP + LINE_HEIGHT * 6 + LINE_MARGIN, 
      TEXTINPUT_WIDTH, TEXTINPUT_HEIGHT,
      null, TEXTINPUT_COLOR, 6);
  
  listener1 = new Object();
  listener1.change = onChangeHSB;
  txtHue.addEventListener("change", listener1);
  txtSaturation.addEventListener("change", listener1);
  txtBrightness.addEventListener("change", listener1);
  
  listener2 = new Object();
  listener2.change = onChangeRGB;
  txtRed.addEventListener("change", listener2);
  txtGreen.addEventListener("change", listener2);
  txtBlue.addEventListener("change", listener2);
 
  update(true);
 }
 
 public function onChangeRGB(eventObject)
 {
  var p = eventObject.target._parent;
  if (p.enabled) {
   var red = parseInt(p.txtRed.text);
   if (isNaN(red)) red = 0;
   var green = parseInt(p.txtGreen.text);
   if (isNaN(green)) green = 0;
   var blue = parseInt(p.txtBlue.text);
   if (isNaN(blue)) blue = 0;
   
   p.setRGB(red, green, blue);
  }
 }
 
 public function setRGBValue(rgb:Number) {
  if (enabled) {
   var red = rgb >> 16;
   var green = (rgb - (red << 16)) >> 8;
   var blue = rgb - (red << 16) - (green << 8);
   setRGB(red, green, blue);
  }
 }
 
 public function setRGB(red:Number, green:Number, blue:Number):Void {
  if (enabled) {
   r = ColorMan.toInteger(red, 0, 255);
   g = ColorMan.toInteger(green, 0, 255);
   b = ColorMan.toInteger(blue, 0, 255);
   
   var hsb = ColorMan.rgb2hsb(r, g, b);  
   H = hsb[0]; S = hsb[1]; B = hsb[2];
   
   update(true);
  }
 }
  
 public function onChangeHSB(eventObject):Void {
  var p = eventObject.target._parent;
  if (p.enabled) {   
   var h = parseInt(p.txtHue.text);
   if (isNaN(h)) h = 0;
   var s = parseInt(p.txtSaturation.text);
   if (isNaN(s)) s = 0;
   var b = parseInt(p.txtBrightness.text);
   if (isNaN(b)) b = 0; 
   
   p.setHSB(h, s, b);
  }
 }
 
 public function setHSB(hue:Number, saturation:Number, brightness:Number):Void {
  if (enabled) {
   if (hue != null)
    H = ColorMan.toInteger(hue, 0, 360);
   if (saturation != null)
    S = ColorMan.toInteger(saturation, 0, 100);
   if (brightness != null)
    B = ColorMan.toInteger(brightness, 0, 100);
 
   var rgb = ColorMan.hsb2rgb(H, S, B);
   r = rgb[0]; g = rgb[1]; b = rgb[2];
   
   update(true);
  }
 }
 
 public function updateHSB(Void):Void {
  if (enabled) {
   var x0 = wheel._x + wheel._width / 2;
   var y0 = wheel._y + wheel._height / 2;
   H = ColorMan.getThetaByXY(ringPointer._x - x0, ringPointer._y - y0);
   if (ringPointer._x == x0)
    S = Math.abs(ringPointer._y - y0);
   else
    S = (ringPointer._x - x0) / Math.cos(H * Math.PI / 180.0);  
   B = 100 - (trianglePointer._y - tube._y - 2) / 2;
   
   H = ColorMan.toInteger(H, 0, 360);
   S = ColorMan.toInteger(S - 1, 0, 100);
   B = ColorMan.toInteger(B, 0, 100);
   
   var rgb = ColorMan.hsb2rgb(H, S, B);
   r = rgb[0]; g = rgb[1]; b = rgb[2];
 
   update(false);
  }
 }
 
 public function update(needMovePointer:Boolean):Void {
  if (enabled) {
   if (needMovePointer) {
    trianglePointer._y = tube._y + 2 + (100 - B) * 2;
    var x0 = wheel._x + wheel._width / 2;
    var y0 = wheel._y + wheel._height / 2;
    ringPointer._x = x0 + S * Math.cos(H * Math.PI / 180);
    ringPointer._y = y0 + S * Math.sin(H * Math.PI / 180);   
   }
   
   wheelStick._rotation = H;
   tubeStick._y = trianglePointer._y;  
   wheel.setBrightness(B);
   tube.paint(H, S); 
   
   txtHue.text = H.toString();
   txtSaturation.text = S.toString();
   txtBrightness.text = B.toString();
   
   txtRed.text = r.toString();
   txtGreen.text = g.toString();
   txtBlue.text = b.toString();
   
   _color = (r << 16) + (g << 8) + b;
   var s = _color.toString(16).toUpperCase();
   var i, j = 6 - s.length;
   for (i = 0; i < j; i++)
    s = "0" + s;
   labelColorValue.text = " #" + s;
   
   dispatchEvent({type:"change", target:this});  
  }
 } 
}

……未完待续……