Farbangaben in Funktionen wie SetColor() und SetBgColor() usw. können in Form eines Strings angegeben werden, wie er von HTML verwendet wird. Neben einigen Namen für Farben wie 'black', 'white', 'red' usw., können auch RGB-Anteile definiert werden im Format '#RGB' oder '#RRGGBB', wobei R, G und B eine Hexadezimale Zahl von 0-F bzw. 00-FF sein kann:
'#FFF' oder '#FFFFFF' oder 'rgb(255,255,255)' ist gleich 'white' '#000' oder '#000000' oder 'rgb(0,0,0)' ist gleich 'black' '#F00' oder '#FF0000' oder 'rgb(255,0,0)' ist gleich 'red' '#0F0' oder '#00FF00' oder 'rgb(0,255,0)' ist gleich 'green' '#00F' oder '#0000FF' oder 'rgb(0,0,255)' ist gleich 'blue' '#888' oder '#808080' oder 'rgb(128,128,128)' ist ein mittleres grau
Bei der Farbangabe per 'rgb()' müssen die einzelnen Farbanteile im Bereich von 0..255 liegen. Bei Zeichenfunktionen kann über 'rgba(r,g,b,transp)' auch eine Halbtransparente Farbe angegeben werden:
jsg.SetColor( 'rgba(255,0,0,0.5)' );
Der letzte Parameter von rgba (hier 0.5) gibt die Transparenz der Farbe an: von 0 → unsichtbar bis 1 → undurchsichtig. Dieser Wert wird mit der globalen Transparenz Alpha multipliziert. Texte werden nicht durch die globale Transparenz beeinflusst. Sie können aber über die rgba-Form der Farbdefinition transparent gezeichnet werden.
Ein Farb-Objekt im JsgColor Format ist ein Array der Grösse 3 oder 4, welcher die Farbkomponenten [ rot, grün, blau, alpha ] als Werte zwischen 0 und 1 enthält. alpha ist der Transparenz-Kanal. alpha = 1 heisst undurchsichtig, alpha = 0 heisst unsichtbar. Der Alpha-Kanal, also die 4-te Komponente ist optional und wird als 1 angenommen, wenn nicht vorhanden.
JsgColor ist eigentlich keine Klasse, sondern ein globales Objekt, welches alle Farb-Funktionen zur Verfügung stellt. Damit können Farben erzeugt und manipuliert werden, siehe JsgColor Funktionen.
Das JsGraph Modul verwendet intern Farben im CSS-String Format. Farben im JsgColor Format werden mit der Funktion JsgColor.ToString() ins CSS-String Format konvertiert.
Hinweis: Obwohl gültige Werte für die Farb-Komponenten und den Alpha-Kanal zwischen 0 und 1 liegen sollen, sind auch Werte ausserhalb dieses Bereiches zulässig. Sie werden beim Umwandeln in einen CSS-String mit JsgColor.ToString() entsprechend auf den gültigen Wertebereich beschnitten.
Das folgende Beispiel zeigt, wie JsgColor Farben erzeugt und manipuliert werden:
var areaColor = JsgColor.RGB( 1, 0, 0 ); // rot var correction = JsgColor.RGB( 0, 0, 0.2 ); // dunkel blau JsgColor.Add( areaColor, correction ); g.SetAreaColor( areaColor ); :
| JsgColor.RGB() | Erzeugt ein JsgColor Objekt aus drei Farbkomponenten |
| JsgColor.RGBA() | Erzeugt ein JsgColor Objekt aus drei Farbkomponenten und einem Alpha-Kanal |
| JsgColor.BW() | Erzeugt ein JsgColor Objekt mit Grauwert zwischen Schwarz und Weiss |
| JsgColor.Black() | Erzeugt ein schwarzes JsgColor Objekt |
| JsgColor.White() | Erzeugt ein weisses JsgColor Objekt |
| JsgColor.Ok() | Gibt true zurück, wenn das Farb-Objekt definiert und vom richtigen Typ ist |
| JsgColor.Alpha() | Gibt den Wert des Alpha-Kanals zurück |
| JsgColor.SetAlpha() | Setzt den Wert des Alpha-Kanals |
| JsgColor.SetRGB() | Setzt die 3 Farb-Komponenten eines Farb-Objektes auf neue Werte |
| JsgColor.SetRGBA() | Setzt die 3 Farb-Komponenten und den Alpha-Kanal eines Farb-Objektes auf neue Werte |
| JsgColor.SetBW() | Setzt die 3 Farb-Komponenten eines Farb-Objektes auf einen Wert zwischen Schwarz und Weiss |
| JsgColor.SetBlack() | Setzt die 3 Farb-Komponenten eines Farb-Objektes auf den Wert für Schwarz |
| JsgColor.SetWhite() | Setzt die 3 Farb-Komponenten eines Farb-Objektes auf den Wert für Weiss |
| JsgColor.Copy() | Gibt eine Kopie eines Farb-Objektes zurück |
| JsgColor.CopyTo(), Set() | Kopiert die Kanäle eines Farb-Objektes in ein anderes |
| JsgColor.ToString() | Wandelt ein Farb-Objekt in einen CSS-String → Farben |
| JsgColor.HSV() | Erzeugt ein Farb-Objekt aus Hue (H), Saturation (S) und Brightness (V) |
| JsgColor.HL() | Erzeugt ein Farb-Objekt aus Hue (H) und Luminance (L) |
| JsgColor.Scale() | Skaliert die Farbwerte mit einem Skalar |
| JsgColor.Add() | Addiert die Farbwerte eines Farb-Objekes zu einem anderen |
| JsgColor.Mult() | Multipliziert die Farbwerte eines Farb-Objektes zu einem anderen |
global JsgColor.RGB( r, g, b )
Erzeugt ein JsgColor Objekt mit den drei Grundfarben. Der Alpha-Kanal wird auf 1 (undurchsichtig) gesetzt.
global JsgColor.RGBA( r, g, b, a )
Erzeugt ein JsgColor Objekt mit den drei Grundfarben. a gibt den Wert des Alpha-Kanals an: 0 → unsichtbar, 1 → undurchsichtig. Es sind alle Werte zwischen 0 und 1 erlaubt.
global JsgColor.BW( v )
Erzeugt ein JsgColor Objekt, bei welchem alle drei Farbkanäle den selben Wert haben. Dadurch entstehen Farben von Schwarz (v = 0) über Grau bis Weiss (v = 1). Der Alpha-Kanal wird auf 1 (undurchsichtig) gesetzt.
global JsgColor.Black( )
Erzeugt ein schwarzes JsgColor Objekt, d.h. alle Farbkanäle sind 0. Der Alpha-Kanal wird auf 1 (undurchsichtig) gesetzt.
global JsgColor.White( )
Erzeugt ein weisses JsgColor Objekt, d.h. alle Farbkanäle sind 1. Der Alpha-Kanal wird auf 1 (undurchsichtig) gesetzt.
global JsgColor.Ok( col )
Überprüft, ob einer Variable ein JsgColor Objekt zugewiesen ist. Eigentlich wird nur geprüft, ob col ein Array ist.
var myCol = JsgColor.Ok(col) ? col : JsgColor.Blank();
global JsgColor.Alpha( col )
Wenn bei der Farbe col der Alpha-Kanal nicht definiert ist (der Array hat weniger als 4 Einträge), so wird 1 zurückgegeben.
global JsgColor.SetAlpha( col, a )
Ändert den Wert des Alpha-Kanals von col auf a. Das Farb-Objekt col wird als Returnwert zurückgegeben, damit mehrere Funktionen verkettet werden können:
var col = JsgColor.Scale(
JsgColor.SetAlpha(
JsgColor.Black(), 0.5
), 0.8
);
global JsgColor.Copy( col )
Erzeugt ein neues Farb-Objekt und kopiert alle Komponenten von col in dieses.
global JsgColor.CopyTo( src, dest )
global JsgColor.Set( dest, src )
Kopiert alle Komponenten des Farb-Objektes src in das bestehende Objekt dest.
global JsgColor.SetRGB( col, r, g, b )
Setzt die drei Grundfarben eines bestehenden JsgColor Objektes auf neue Werte. Der Alpha-Kanal wird auf 1 (undurchsichtig) gesetzt.
global JsgColor.SetRGBA( col, r, g, b, a )
Setzt die drei Grundfarben und den Alpha-Kanal eines bestehenden JsgColor Objektes auf neue Werte.
global JsgColor.SetBW( col, v )
Setzt die drei Grundfarben eines bestehenden JsgColor Objektes auf den Wert v, womit eine Farbe zwischen schwarz (v=0) und weiss (v=1) entsteht. Der Alpha-Kanal wird auf 1 (undurchsichtig) gesetzt.
global JsgColor.SetBlack( col )
Setzt die drei Grundfarben eines bestehenden JsgColor Objektes auf 0, womit die Farbe Schwarz entsteht. Der Alpha-Kanal wird auf 1 (undurchsichtig) gesetzt.
global JsgColor.SetWhite( col )
Setzt die drei Grundfarben eines bestehenden JsgColor Objektes auf 1, womit die Farbe Weiss entsteht. Der Alpha-Kanal wird auf 1 (undurchsichtig) gesetzt.
global JsgColor.ToString( col )
Mit dieser Funktion können Farben, welche in RGB-Komponenten vorliegen, d.h. im JsgColor Format, in einen CSS-String verwandelt werden, wie er bei Attribut Funktionen benötigt wird. Der String hat das Format:
'#ff8000' → Orange 'rgba( 255, 128, 0, 0.5)' → Orange halbtransparent
var col = JsgColor.RGB( 1, 0.5, 0 ); g.SetColor( JsgColor.ToString( col ) );
global JsgColor.HSV( H, S, V, A )
Mit dieser Funktion lässt sich eine Farbe über den HSV-Farbraum definieren.
var col = JsgColor.HSV( 0, 1, 0.5 ); // dunkles rot g.SetColor( JsgColor.ToString( col ) );
global JsgColor.HL( H, L, A )
Mit dieser Funktion lässt sich eine Farbe im HSV-Farbraum definieren. Aus dem Parameter L werden Werte für Saturation S und Value V generiert und zwar wiefolgt:
Das heisst: Für Werte von L = 0 bis 0.5 ist die Farbsättigung = 1 (satte Farben) und die Helligkeit geht von 0 (schwarz) bis 1 (satte Farben). Für Werte von L = 0.5 bis 1 ist die Helligkeit = 1 und die Sättigung geht von 1 (satte Farbe) bis 0 (weiss).
var col = JsgColor.HL( 0, 0.7 ); // helles rot g.SetColor( JsgColor.ToString( col ) );
global JsgColor.Scale( col, s )
Multipliziert alle Farb-Komponenten von col mit s. Der Alpha-Kanal wird nicht verändert. Gibt col zurück, damit mehrere Funktionsaufrufe verkettet werden können.
Durch Scale können Farbwerte ausserhalb des Bereiches 0-1 entstehen. Beim Umwandeln mit JsgColor.ToString werden die Werte auf den Bereich 0-1 beschnitten.
global JsgColor.Add( col, add )
Addiert alle Farb-Komponenten von add zu den Farb-Komponenten von col. Der Alpha-Kanal wird nicht verändert. Gibt col zurück, damit mehrere Funktionsaufrufe verkettet werden können.
Durch Add können Farbwerte ausserhalb des Bereiches 0-1 entstehen. Beim Umwandeln mit JsgColor.ToString werden die Werte auf den Bereich 0-1 beschnitten.
global JsgColor.Mult( col, mul )
Multipliziert alle Farb-Komponenten von mult zu den Farb-Komponenten von col. Der Alpha-Kanal wird nicht verändert. Gibt col zurück, damit mehrere Funktionsaufrufe verkettet werden können.
Durch Mult können Farbwerte ausserhalb des Bereiches 0-1 entstehen. Beim Umwandeln mit JsgColor.ToString() werden die Werte auf den Bereich 0-1 beschnitten.