ColorPicker Klasse
In diesem Abschnitt präsentiere ich meine ColorPicker Klasse, die frei von jedermann verwendet werden kann, der sie für nützlich hält. Diese Klasse bietet ein einfaches Farbauswahl-Werkzeug in Form einer graphischen Schnittstelle, die dazu benutzt werden kann, die Farbe eines anderen Anzeigeobjekts festzulegen – ganz in der Art, wie man es von üblichen Grafikwerkzeugen kennt: Jedes ColorPicker Objekt besteht aus zwei Farbkarten, welche mithilfe der Maus beeinflusst werden können. Die Farbskala auf der rechten Seite dient dazu, den Farbton auszuwählen (die Position des jeweils ausgewählten Farbtons auf der Skala wird durch die beiden Pfeile angezeigt). Abhängig von diesem Farbton wird die linke Farbkarte automatisch aufgefrischt. Dieses Farbdiagramm erlaubt es dem Benutzer, die Werte für die beiden übrigen Farbdimensionen des HSL-Modells festzulegen: Die Sättigung (x-Achse) und die Helligkeit (y-Achse). Der resultierende Farbcode (in Gestalt eines Tripels von hexadezimal kodierten Intensitätswerten für die drei Farbkanonen des Monitors) wird im unteren Teil des ColorPicker Objekts angezeigt und ebenfalls kontinuierlich während des Auswahlprozesses aufgefrischt – wie auch das benachbarte Farbfeld, das die aktuell ausgewählte Farbe anzeigt.
Demonstration
Zur Demonstration der Funktionalität der ColorPicker Klasse habe ich eine kleine Beispielanwendung programmiert: In diesem Beispiel wurden zwei Instanzen der ColorPicker Klasse verwendet, die dazu benutzt werden können, die beiden Farben eines Schachbrettmusters festzulegen. Die entsprechenden Farben werden in diesem Fall dem Schachbrettmuster zugewiesen, sobald die Maustaste losgelassen wird.
Einbinden der ColorPicker Klasse
Damit Sie die ColorPicker Klasse in Ihrem eigenen Projekt verwenden können, müssen Sie zunächst den unten aufgeführten Code vollständig kopieren und in einer Datei mit dem Namen “ColorPicker.as” speichern. Zu Demonstrationszwecken habe ich keinen spezifischen Paket-Pfad festgelegt, weshalb dieses File in demselben Verzeichnis abgelegt werden muss, in dem sich auch Ihr Flash-Projekt befindet (ansonsten ist es Ihnen überlassen, einen eigenen Paket-Pfad zu definieren). Ich werde den dieser Klasse zugrunde liegenden Code nicht weiter erläutern, wenn Sie jedoch Fragen dazu haben, scheuen Sie sich nicht, einen Kommentar auf dieser Seite zu hinterlassen.
package
{
/*
* @author Gunnar Wendt 2012
* @version 1.0
*
* www.worldwidewendt.com
*
*/
import flash.display.Sprite;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.events.MouseEvent;
import flash.text.TextField;
import flash.text.TextFormat;
public class ColorPicker extends Sprite
{
private var hueDown:Boolean = false;
private var colorDown:Boolean = false;
public var colorResult:uint = 0;
private var h:Number = 1.0;
private var s:Number = 0.5;
private var l:Number = 0.5;
public var ColorChartData:BitmapData = new BitmapData(100,100,false,0x000000);
public var ColorChartImage:Bitmap = new Bitmap(ColorChartData);
public var ColorChartContainer:Sprite = new Sprite;
public var HueChartData:BitmapData = new BitmapData(25,100,false,0x000000);
public var HueChartImage:Bitmap = new Bitmap(HueChartData);
public var HueChartContainer:Sprite = new Sprite;
public var ColorPointer:Sprite = new Sprite();
public var colorDisplay:TextField = new TextField();
public var HueBar:Sprite = new Sprite();
public function ColorPicker(colh:Number = 1.0,cols:Number = 0.5,coll:Number = 0.5)
{
if(colh < 0)
colh = 0;
if(colh > 1)
colh = 1;
if(cols < 0)
cols = 0;
if(cols > 1)
cols = 1;
if(coll < 0)
coll = 0;
if(coll > 1)
coll = 1;
h = colh;
s = cols;
l = 1 - coll;
drawPicker(h);
setListeners();
}
private function drawPicker(hue:Number):void
{
this.graphics.lineStyle(1,0x888888);
this.graphics.beginFill(0x333333);
this.graphics.drawRoundRect(0,0,140,140,8);
colorDisplay.type = "dynamic";
colorDisplay.wordWrap = true;
colorDisplay.border = true;
colorDisplay.background = 0xCCCCCC;
colorDisplay.width = 70;
colorDisplay.height = 25;
colorDisplay.x = 5;
colorDisplay.y = 110;
updateColorChart(hue);
drawHueChart();
ColorChartContainer.addChild(ColorChartImage);
ColorChartContainer.x = 5;
ColorChartContainer.y = 5;
this.addChild(ColorChartContainer);
HueChartContainer.addChild(HueChartImage);
HueChartContainer.x = 110;
HueChartContainer.y = 5;
this.addChild(HueChartContainer);
this.addChild(colorDisplay);
ColorChartContainer.mouseChildren = false;
HueChartContainer.mouseChildren = false;
drawCurrentColor(uint(HSLtoRGB(h,s,l)));
setDisplay(HSLtoRGB(h,s,l));
///HUE POINTER
HueBar.graphics.beginFill(0xFFFFFF);
HueBar.graphics.moveTo(-4,-3);
HueBar.graphics.lineTo(-4,3);
HueBar.graphics.lineTo(0,0);
HueBar.graphics.moveTo(29,-3);
HueBar.graphics.lineTo(29,3);
HueBar.graphics.lineTo(25,0);
HueBar.graphics.endFill();
HueChartContainer.addChild(HueBar);
drawHueBar((1-h)*100);
///COLOR POINTER
var rad:int = 3;
var xpos:int = 0;
var ypos:int = 0;
ColorPointer.graphics.lineStyle(1,0xFFFFFF);
ColorPointer.graphics.moveTo(xpos,ypos-rad);
ColorPointer.graphics.curveTo(xpos+rad,ypos-rad,xpos+rad,ypos);
ColorPointer.graphics.lineStyle(1,0x000000);
ColorPointer.graphics.curveTo(xpos+rad,ypos+rad,xpos,ypos+rad);
ColorPointer.graphics.lineStyle(1,0xFFFFFF);
ColorPointer.graphics.curveTo(xpos-rad,ypos+rad,xpos-rad,ypos);
ColorPointer.graphics.lineStyle(1,0x000000);
ColorPointer.graphics.curveTo(xpos-rad,ypos-rad,xpos,ypos-rad);
ColorPointer.cacheAsBitmap = true;
ColorChartContainer.addChild(ColorPointer);
drawPointer(s*100,l*100);
}
private function toHex(num:uint):String
{
var firstDigit:uint = Math.floor(num/16);
var secondDigit:uint = num%16;
var hexDigits:Array = ["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"];
var str:String = hexDigits[firstDigit]+hexDigits[secondDigit];
return str;
}
private function colorHex(red:uint,green:uint,blue:uint):String
{
var resStr:String = "0x"+toHex(red)+toHex(green)+toHex(blue);
return resStr;
}
private function HuetoRGB(v1:Number, v2:Number, vH:Number):Number
{
if(vH < 0)
{
vH += 1;
}
else if(vH > 1)
{
vH -= 1;
}
if((6*vH) < 1)
{
return v1 + (v2 - v1) * 6 * vH;
}
if((2 * vH) < 1)
{
return v2;
}
if((3 * vH) < 2)
{
return v1 + (v2 - v1) *((2/3) - vH)* 6;
}
return v1;
}
private function HSLtoRGB(h:Number, s:Number, l:Number):String
{
var r,g,b:uint;
var v1, v2:Number;
l = 1-l;
if(s==0)
{
r = l * 255;
g = l * 255;
b = l * 255;
}
else
{
if(l < 0.5)
{
v2 = l * (1 + s);
}
else
{
v2 = (l + s) - (s * l);
}
v1 = 2 * l - v2;
r = uint(255 * HuetoRGB(v1,v2,h+(1/3)));
g = uint(255 * HuetoRGB(v1,v2,h));
b = uint(255 * HuetoRGB(v1,v2,h-(1/3)));
}
return colorHex(r,g,b);
}
private function updateColorChart(hue:Number):void
{
for(var i:uint = 0; i < 100; i++)
{
for(var j:uint = 0; j < 100; j++)
{
ColorChartData.setPixel(i,j,uint(HSLtoRGB(hue,i/100,j/100)));
}
}
}
private function drawHueChart():void
{
for(var k:uint = 0; k < 25; k++)
{
for(var l:uint = 0; l < 100; l++)
{
HueChartData.setPixel(k,l,uint(HSLtoRGB(1-l/100,0.8,0.5)));
}
}
}
////LISTENERS
function setListeners():void
{
this.ColorChartContainer.addEventListener(MouseEvent.MOUSE_MOVE,updateColor);
this.ColorChartContainer.addEventListener(MouseEvent.MOUSE_DOWN,downColor);
this.ColorChartContainer.addEventListener(MouseEvent.MOUSE_UP,upColor);
this.ColorChartContainer.addEventListener(MouseEvent.MOUSE_OUT,upColor);
this.HueChartContainer.addEventListener(MouseEvent.MOUSE_MOVE,getHue);
this.HueChartContainer.addEventListener(MouseEvent.MOUSE_DOWN,downHue);
this.HueChartContainer.addEventListener(MouseEvent.MOUSE_UP,upHue);
this.HueChartContainer.addEventListener(MouseEvent.MOUSE_OUT,upHue);
}
private function updateColor(event:MouseEvent):void
{
if(colorDown)
{
s = ColorChartContainer.mouseX/100;
l = ColorChartContainer.mouseY/100;
var myColor:uint = uint(HSLtoRGB(h,s,l));
drawPointer(ColorChartContainer.mouseX,ColorChartContainer.mouseY);
setDisplay(HSLtoRGB(h,s,l));
drawCurrentColor(myColor);
colorResult = myColor;
}
}
private function downColor(event:MouseEvent):void
{
colorDown = true;
s = ColorChartContainer.mouseX/100;
l = ColorChartContainer.mouseY/100;
var myColor:uint = uint(HSLtoRGB(h,s,l));
drawPointer(ColorChartContainer.mouseX,ColorChartContainer.mouseY);
setDisplay(HSLtoRGB(h,s,l));
drawCurrentColor(myColor);
}
private function upColor(event:MouseEvent):void
{
colorDown = false;
}
private function getHue(event:MouseEvent):void
{
if(hueDown)
{
h = 1 - event.currentTarget.mouseY/100;
updateColorChart(h);
drawCurrentColor(uint(HSLtoRGB(h,s,l)));
setDisplay(HSLtoRGB(h,s,l));
HueBar.y = event.currentTarget.mouseY;
}
}
private function downHue(event:MouseEvent):void
{
hueDown = true;
h = 1 - event.currentTarget.mouseY/100;
updateColorChart(h);
drawCurrentColor(uint(HSLtoRGB(h,s,l)));
setDisplay(HSLtoRGB(h,s,l));
HueBar.y = event.currentTarget.mouseY;
}
private function upHue(event:MouseEvent):void
{
hueDown = false;
}
private function setDisplay(col:String):void
{
var textFormat:TextFormat = new TextFormat();
textFormat.color = 0x222222;
textFormat.font = "Arial";
colorDisplay.text = col;
colorDisplay.setTextFormat(textFormat);
}
private function drawPointer(xpos:int, ypos:int):void
{
ColorPointer.x = xpos;
ColorPointer.y = ypos;
}
private function drawHueBar(ypos:int):void
{
HueBar.y = ypos;
}
private function drawCurrentColor(col:uint):void
{
var CurrentColorData:BitmapData = new BitmapData(55,25,false,col);
var CurrentColorImage:Bitmap = new Bitmap(CurrentColorData);
CurrentColorImage.x = 80;
CurrentColorImage.y = 110;
this.addChild(CurrentColorImage);
colorResult = col;
}
public function get getColor():uint
{
return colorResult;
}
public function get getH():Number
{
return h;
}
public function get getS():Number
{
return s;
}
public function get getL():Number
{
return l;
}
///END CLASS
}
///END PACKAGE
}
Verwendung der ColorPicker Klasse im eigenen Projekt
Der erste Schritt für die Verwendung der ColorPicker Klasse im eigenen Projekt besteht darin, die Klasse zu importieren: import ColorPicker;
. Sobald die Klasse dem Projekt hinzugefügt worden ist, können Instanzen des ColorPicker Objekts erstellt werden und zwar in der gewohnten Weise. Um das gesamte Vorgehen bei der Benutzung eines solchen Objekts zu veranschaulichen, habe ich den Code, den ich für die Beispielanwenung geschrieben haben, unten aufgeführt: Ich habe zunächst zwei Instanzen des ColorPicker Objekts erstellt (myCP1
und myCP2
), die jeweils verantwortlich für eine der beiden Farben des Schachbrettmusters sind. Beim Aufrufen des Konstruktors der ColorPicker Klasse (new ColorPicker()
) können optional die Parameter für die Startfarbe angegeben werden, als relative Werte [0-1] für die drei Komponenten Farbton, Sättigung und Helligkeit (ansonsten werden Standardwerte verwendet). Da die ColorPicker Klasse die Sprite Klasse erweitert, kann jede Instanz in der Szene platziert werden, indem der x
- und der y
-Eigenschaft ein neuer Wert zugewiesen wird. Schließlich muss jede ColorPicker Instanz, ganz wie gewohnt, der Anzeigeliste hinzugefügt werden, indem die addChild()
Methode aufgerufen und als Argument der Instanzname des ColorPicker Objekts übergeben wird. Soviel zu den grundlegenden Schritten, die für die Platzierung dieser besonderen Form eines Anzeigeobjekts in der Szene notwendig sind.
Das allein sieht zwar schon ganz hübsch aus, um nun aber die Funktionalität dieser Klasse nutzen zu können, muss ein jedes ColorPicker Objekt mit einem Mausereignis und mit dem Anzeigeobjekt verknüpft werden, dessen Farbe beeinflusst werden soll. Um das zu realisieren, bieten sich mehrere Möglichkeiten an, jedoch werde ich zu Anschauungszwecken nur die eine vorstellen, die ich für meine Beispielanwendung benutzt habe:
Mein Schachbrettmuster setzt sich aus zwei Sprites zusammen (mySprite1
und mySprite2
). Das eine davon bildet als großes Quadrat den globalen Hintergrund, das andere besteht aus einer Vielzahl von kleineren Quadraten, welche in ihrer Gesamtheit das strukturierte Muster ausmachen. Jedes Mal, wenn das Schachbrettmuster mit einer Farbe neu gezeichnet werden soll, wird eine Funktion aufgerufen (updateChecker(Farbe_1, Farbe_2)
), die die neu zu zeichnenden Farben für die beiden Schachbrettelemente als Argumente fordert. Dieser Funktion übergeben wir daher die entsprechenden Farbcodes, die durch die beiden ColorPicker Instanzen repräsentiert sind, d.h. die jeweils aktuell ausgewählte Farbe. Um auf diese aktuell ausgewählte Farbe zugreifen zu können, benutzen wir eine klassenspezifische Eigenschaft namens getColor
. In unserem Beispiel also: myCP1.getColor
, bzw. myCP2.getColor
. (Für andere Zwecke besteht außerdem die Möglichkeit, auf die Werte für den Farbton, die Sättigung und die Helligkeit zuzugreifen, mit den Eigenschaften getH
, getS
und getL
). Die Funktion updateChecker
wird also jedes Mal aufgerufen, wenn sich die Farbe in einem der beiden ColorPicker Objekte gändert hat. Aus diesem Grund werden beide Instanzen mit demselben Mausereignis verknüpft, mithilfe der addEventListener()
Methode. Beide Instanzen sind im Beispiel mit der Funktion updateColor
verknüpft, die durch einen Mausklick ausgelöst wird und die dann die updateChecker
Funktion mit den beiden aktuellen Farbwerten der ColorPicker Objekte aufruft. Eigentlich ganz einfach, oder?
import ColorPicker;
import flash.events.MouseEvent;
import flash.display.*;
var myCP1:ColorPicker = new ColorPicker(0.35,0.5,0.6);
myCP1.x = 20;
myCP1.y = 20;
addChild(myCP1);
var myCP2:ColorPicker = new ColorPicker(0.5,0.7,0.3);
myCP2.x = 20;
myCP2.y = 180;
addChild(myCP2);
var mySprite1:Sprite = new Sprite();
mySprite1.x = 200;
mySprite1.y = 20;
addChild(mySprite1);
var mySprite2:Sprite = new Sprite();
mySprite2.x = 200;
mySprite2.y = 20;
addChild(mySprite2);
updateChecker(myCP1.getColor,myCP2.getColor);
myCP1.addEventListener(MouseEvent.CLICK,updateColor);
myCP2.addEventListener(MouseEvent.CLICK,updateColor);
function updateColor(event:MouseEvent):void
{
updateChecker(myCP1.getColor,myCP2.getColor);
}
function updateChecker(col1:uint,col2:uint):void
{
var l:int = 30;
mySprite1.graphics.beginFill(col1);
mySprite1.graphics.drawRect(0,0,300,300);
mySprite1.graphics.endFill();
mySprite2.graphics.beginFill(col2);
for(var i:int = 0; i < 10; i++)
{
for(var j:int = 0; j < 10; j++)
{
if((i+j)%2 == 0)
{
mySprite2.graphics.drawRect(i*l,j*l,l,l);
}
}
}
mySprite2.graphics.endFill();
}
© 2012 G. Wendt
Sie haben Schwierigkeiten damit, die richtige Farb- kombination und passende Schriftformate für Ihren Web-Auftritt zu finden?
Nutzen Sie das Werkzeug Farbe & Schrift auf dieser Website, um interaktiv die Farb- und Schrifteigenschaften für Ihre eigene Seite zu gestalten. Das Ergebnis Ihrer Einstellungen können Sie einfach als CSS-Format in Ihr Webprojekt einbinden.
M | D | M | D | F | S | S |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |