Grafik-API

Mit der graphics-Eigenschaft des Sprite-Objekts können wir ein Objekt der Graphics-Klasse abrufen, welches einige Funktionen zum Zeichnen von Formen und Pfaden zur Verfügung stellt. Mit Hilfe der Funktion beginFill() können wir die Füllfarbe einer Form festlegen. Als Parameter wird der Funktion der Farbwert (RGB-Wert) und optional der Alphawert (0.0 für 0% Deckkraft bis 1.0 für 100% Deckkraft) übergeben. Eine Füllung kann mit der Funktion endFill() beendet werden. Mit Hilfe der Funktion lineStyle() ist es möglich, die zu zeichnende Line für eine Form oder Linie festzulegen. Als Parameter können der Funktion die Breite, die Farbe und der Alphawert übergeben werden. Alle Parameter sind dabei optional. Ein Aufruf der Funktion ohne Parameter setzt die Linieneinstellung zurück. Um alle gezeichneten Grafiken sowie Füll- und Linieneinstellungen zurückzusetzen, können wir die Funktion clear() aufrufen.

Rechtecke

Um Rechtecke zu zeichnen, stehen uns die drei Funktionen drawRect(), drawRoundRect() und drawRoundRectComplex() zur Verfügung. Allen Funktionen müssen vier Parameter übergeben werden: X-Position, Y-Position, Breite und Höhe. Der Funktion drawRoundRect() muss zusätzlich ein weiterer Parameter übergeben werden, in welchem die Breite der Abrundung der Ecken festgelegt wird. Als 6. optionaler Parameter kann die Höhe der Eckenabrundung festgelegt werden. Wird der Parameter weggelassen, so entspricht er der Breite der abgerundeten Ecken. Der Funktion drawRoundRectComplex() müssen zusätzlich zu den Positions- und Größenparameter die Radien aller 4 Ecken übergeben werden. Dabei gilt folgende Reihenfolge: oben links, oben rechts, unten links, unten rechts.

// Rotes Rechteck
graphics.beginFill(0xFF0000);
graphics.drawRect(50, 50, 300, 300);
graphics.endFill();

// Grünes Rechteck mit grauer Linie
graphics.lineStyle(10, 0xEEEEEE, 0.8);
graphics.beginFill(0x00FF00, 0.6);
graphics.drawRoundRect(200, 400, 500, 150, 25, 50);
graphics.endFill();

// Blaues Rechteck
graphics.lineStyle();
graphics.beginFill(0x0000FF, 0.2);
graphics.drawRoundRectComplex(450, 100, 200, 150, 40, 10, 20, 30);
graphics.endFill();

Kreise und Ellipsen

Einen Kreis können wir mittels der Funktion drawCircle() zeichnen. Der Funktion werden die X- und Y-Position sowie der Radius übergeben. Die Positionen beziehen sich dabei auf den Mittelpunkt des Kreises. Die Funktion drawEllipse() zeichnet eine Ellipse. Der Funktion werden die X- und Y-Position sowie die Breite und Höhe übergeben. Die Positionen beziehen sich hier, anders als bei der Funktion drawCircle(), auf die Ecke oben links des umliegenden Rechtecks.

graphics.beginFill(0xFF0000);
graphics.drawCircle(250, 250, 200);
graphics.endFill();

graphics.beginFill(0x0000FF);
graphics.drawEllipse(450, 400, 300, 150);
graphics.endFill();

Pfade

Um komplexe Formen (dabei spricht man auch von Pfaden) zu zeichnen, können wir die Funktionen lineTo() und moveTo() benutzen. Die Funktion lineTo() zeichnet dabei eine Linie von dem vorherigen Punkt bis zu dem angegebenen Punkt. moveTo() hingegen springt lediglich von der alten zur neuen Position, ohne dabei eine Linie zu zeichnen. Beiden Funktionen wird als Parameter die X- und Y-Position übergeben. Eine Reihe von X- und Y-Positionen kann der Funktion drawPath() übergeben werden. Der Funktion wird ein Vektor mit Zeichen-Kommandos (Konstanten aus der GraphicsPathCommand-Klasse) und ein Vektor mit Positionen (X- und Y-Position jeweils nacheinander) übergeben. Die endFill()-Funktion zeichnet übrigens automatisch eine Linie zum Ausgangspunkt (siehe Beispiel).

Kurven können mittels den Funktionen curveTo() und cubicCurveTo() gezeichnet werden. Die Funktion curveTo() zeichnet eine quadratische Bézierkurve. Der Funktion wird die X- und Y-Position des Kontrollpunkts und des sogenannten Ankerpunkts übergeben. Der Ankerpunkt stellt dabei den Punkt dar, wo die Linie / Kurve endet. Die Funktion cubicCurveTo() zeichnet eine sogenannte kubische Bézierkurve. Als Parameter werden die Positionen zweier Kontrollpunkte sowie eines Ankerpunkts übergeben.

// Achteck oben links
graphics.beginFill(0xFF0000);
graphics.moveTo(50, 25);
graphics.lineStyle(5, 0x00FF00);
graphics.lineTo(100, 25);
graphics.lineStyle(5, 0x0000FF);
graphics.lineTo(125, 50);
graphics.lineStyle(5, 0x00FF00);
graphics.lineTo(125, 75);
graphics.lineStyle(5, 0x0000FF);
graphics.lineTo(100, 100);
graphics.lineStyle(5, 0x00FF00);
graphics.lineTo(50, 100);
graphics.lineStyle(5, 0x0000FF);
graphics.lineTo(25, 75);
graphics.lineStyle(5, 0x00FF00);
graphics.lineTo(25, 50);
graphics.lineStyle(5, 0x0000FF);
//graphics.lineTo(50, 25);		--> nicht notwendig, wird von endFill() automatisch ausgeführt
graphics.endFill();

// Achteck oben rechts
var achteckKommandos:Vector.<int> = new Vector.<int>(8, true);
var achteckPositionen:Vector.<Number> = new Vector.<Number>(16, true);
achteckKommandos[0] = GraphicsPathCommand.MOVE_TO;
for (var i:int = 1; i < 8; i++)
	achteckKommandos[i] = GraphicsPathCommand.LINE_TO;
achteckPositionen[0] = 250;		// X1
achteckPositionen[1] = 25;		// Y1
achteckPositionen[2] = 300;		// X2
achteckPositionen[3] = 25;		// Y2
achteckPositionen[4] = 325;		// X3
achteckPositionen[5] = 50;		// Y3
achteckPositionen[6] = 325;		// X4
achteckPositionen[7] = 75;		// Y4
achteckPositionen[8] = 300;		// X5
achteckPositionen[9] = 100;		// Y5
achteckPositionen[10] = 250;	// X6
achteckPositionen[11] = 100;	// Y6
achteckPositionen[12] = 225;	// X7
achteckPositionen[13] = 75;		// Y7
achteckPositionen[14] = 225;	// X8
achteckPositionen[15] = 50;		// Y8
graphics.lineStyle();
graphics.beginFill(0x0000FF);
graphics.drawPath(achteckKommandos, achteckPositionen);
graphics.endFill();

// Wellenlinie mitte mitte
graphics.lineStyle(1, 0x00FF00);
graphics.moveTo(100, 300);
graphics.curveTo(125, 325, 150, 300);
graphics.curveTo(175, 275, 200, 300);
graphics.curveTo(225, 325, 250, 300);
graphics.curveTo(275, 275, 300, 300);
graphics.curveTo(325, 325, 350, 300);
graphics.curveTo(375, 275, 400, 300);
graphics.curveTo(425, 325, 450, 300);
graphics.curveTo(475, 275, 500, 300);
graphics.curveTo(525, 325, 550, 300);
graphics.curveTo(575, 275, 600, 300);

// Wellenlinie unten mitte
graphics.lineStyle(1, 0x00FF00);
graphics.moveTo(100, 500);
graphics.cubicCurveTo(110, 525, 130, 520, 150, 500);
graphics.cubicCurveTo(170, 475, 190, 480, 200, 500);
graphics.cubicCurveTo(210, 525, 230, 530, 250, 500);
graphics.cubicCurveTo(270, 475, 290, 470, 300, 500);
graphics.cubicCurveTo(310, 525, 330, 520, 350, 500);
graphics.cubicCurveTo(370, 475, 390, 480, 400, 500);
graphics.cubicCurveTo(410, 525, 430, 530, 450, 500);
graphics.cubicCurveTo(470, 475, 490, 470, 500, 500);
graphics.cubicCurveTo(510, 525, 530, 520, 550, 500);
graphics.cubicCurveTo(570, 475, 590, 480, 600, 500);

Shape

Die Klasse Shape stellt ein einfaches Element zum Zeichnen dar. Die Shape-Klasse enthält, wie die Sprite-Klasse auch, die graphics-Eigenschaft. Dort können alle bekannte Funktionen verwendet werden. Der Vorteil beim Zeichnen auf ein Shape-Element an Stelle direkt auf das Sprite-Element zu zeichnen ist, dass wir mittels dieses Elements Zeichnungen gruppieren können. Wollen wir dann z. B. nur eine bestimmte Gruppe von Zeichnungen zurücksetzen, so rufen wir lediglich die clear()-Funktion dieses Shape-Elements auf. Alle anderen Zeichnungen, die einem anderen Shape-Element zugewiesen sind, bleiben dabei erhalten.

var form:Shape = new Shape();
form.graphics.beginFill(0xFF0000);
form.graphics.drawRect(50, 50, 300, 300);
form.graphics.endFill();
addChild(form);