用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,
width: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});
}
}
}

……未完待续……