Erstellen von Farbverlaufslinien und -füllungen

Mithilfe der Methoden beginGradientFill() und lineGradientStyle() der flash.display.Graphics-Klasse können Sie den Farbverlauf in Formen definieren. Beim Definieren eines Farbverlaufs geben Sie eine Matrix als einen der Parameter dieser Methoden an.

Die Matrix kann am einfachsten mithilfe der createGradientBox()-Methode der Matrix-Klasse definiert werden, bei der eine Matrix zum Definieren des Farbverlaufs festgelegt wird. Sie legen die Skalierung, Drehung und Position des Farbverlaufs mit den Parametern fest, die an die createGradientBox()-Methode übergeben werden. Bei der createGradientBox()-Methode können folgende Parameter angegeben werden:

• Breite des Farbverlaufsfelds: die Breite (in Pixel), auf die sich der Farbverlauf ausdehnt

• Höhe des Farbverlaufsfelds: die Höhe (in Pixel), auf die sich der Farbverlauf ausdehnt

• Drehung des Farbverlaufsfelds: die Drehung (in Bogenmaß) des Farbverlaufs

• Horizontale Versetzung: horizontale Versetzung (in Pixel) des Farbverlaufs

• Vertikale Versetzung: vertikale Versetzung (in Pixel) des Farbverlaufs

Dies wird an einem Beispiel für einen Farbverlauf mit den folgenden Merkmalen verdeutlicht:

• GradientType.LINEAR

• Zwei Farben, Grün und Blau, bei denen das ratios-Array auf [0, 255] gesetzt ist.

• SpreadMethod.PAD

• InterpolationMethod.LINEAR_RGB

In den folgenden Beispielen sind Farbverläufe abgebildet, bei denen der rotation-Parameter der createGradientBox()-Methode wie angegeben abweicht, alle anderen Einstellungen jedoch unverändert bleiben:

width = 100; height = 100; rotation = 0; tx = 0; ty = 0;
width = 100; height = 100; rotation = Math.PI/4; // 45° tx = 0; ty = 0;
width = 100; height = 100; rotation = Math.PI/2; // 90° tx = 0; ty = 0;

In den folgenden Beispielen sind die Effekte in einem linearen Grün-Blau-Farbverlauf abgebildet, bei dem die Parameter rotation, tx und ty der createGradientBox()-Methode wie angegeben abweichen, alle anderen Einstellungen jedoch unverändert bleiben:

width = 50; height = 100; rotation = 0; tx = 0; ty = 0;
width = 50; height = 100; rotation = 0 tx = 50; ty = 0;
width = 100; height = 50; rotation = Math.PI/2; // 90° tx = 0; ty = 0;
width = 100; height = 50; rotation = Math.PI/2; // 90° tx = 0; ty = 50;

Die Parameter width, height, tx und ty der createGradientBox()-Methode wirken sich auch auf die Größe und die Position der radialen Farbverlaufsfüllung aus, wie im folgenden Beispiel abgebildet:

width = 50; height = 100; rotation = 0; tx = 25; ty = 0;

Der zuletzt abgebildete radiale Farbverlauf wird mit folgendem Code erstellt:

import flash.display.Shape; 
import flash.display.GradientType; 
import flash.geom.Matrix; 
 
var type:String = GradientType.RADIAL; 
var colors:Array = [0x00FF00, 0x000088]; 
var alphas:Array = [1, 1]; 
var ratios:Array = [0, 255]; 
var spreadMethod:String = SpreadMethod.PAD; 
var interp:String = InterpolationMethod.LINEAR_RGB; 
var focalPtRatio:Number = 0; 
 
var matrix:Matrix = new Matrix(); 
var boxWidth:Number = 50; 
var boxHeight:Number = 100; 
var boxRotation:Number = Math.PI/2; // 90° 
var tx:Number = 25; 
var ty:Number = 0; 
matrix.createGradientBox(boxWidth, boxHeight, boxRotation, tx, ty); 
 
var square:Shape = new Shape; 
square.graphics.beginGradientFill(type,  
                            colors, 
                            alphas, 
                            ratios,  
                            matrix,  
                            spreadMethod,  
                            interp,  
                            focalPtRatio); 
square.graphics.drawRect(0, 0, 100, 100); 
addChild(square);

Beachten Sie, dass die Breite und die Höhe der Farbverlaufsfüllung durch die Breite und die Höhe der Farbverlaufsmatrix und nicht durch die mit dem Graphics-Objekt gezeichnete Breite und Höhe festgelegt werden. Beim Zeichnen mithilfe des Graphics-Objekts wird eine Zeichnung an den entsprechenden Koordinaten in der Farbverlaufsmatrix erstellt. Auch wenn Sie eine der Shape-Methoden eines Graphics-Objekts (z. B. drawRect() verwenden, dehnt sich der Farbverlauf nicht automatisch auf die gezeichnete Form aus. Die Größe des Farbverlaufsfelds muss stattdessen in der Farbverlaufsmatrix angegeben werden.

Das folgende Codebeispiel veranschaulicht den visuellen Unterschied zwischen den Abmessungen der Farbverlaufsmatrix und den Zeichnungsabmessungen:

var myShape:Shape = new Shape(); 
var gradientBoxMatrix:Matrix = new Matrix(); 
gradientBoxMatrix.createGradientBox(100, 40, 0, 0, 0); 
myShape.graphics.beginGradientFill(GradientType.LINEAR, [0xFF0000, 0x00FF00, 0x0000FF], [1, 1, 1], [0, 128, 255], gradientBoxMatrix); 
myShape.graphics.drawRect(0, 0, 50, 40); 
myShape.graphics.drawRect(0, 50, 100, 40); 
myShape.graphics.drawRect(0, 100, 150, 40); 
myShape.graphics.endFill(); 
this.addChild(myShape);

Mit diesem Code werden drei Farbverläufe mit dem gleichen Füllstil gezeichnet, der als gleichmäßige Verteilung auf die Farben Rot, Grün und Blau angegeben ist. Die Farbverläufe werden mit der drawRect()-Methode mit einer Breite von jeweils 50, 100 und 150 Pixel erstellt. Die Farbverlaufsmatrix, die in der beginGradientFill()-Methode angegeben ist, wird mit einer Breite von 100 Pixel erstellt. Dies bedeutet, dass der erste Farbverlauf nur die Hälfte des Farbverlaufsspektrums umfasst. Der zweite Farbverlauf umfasst das gesamte Spektrum. Der dritte Farbverlauf umfasst das gesamte Spektrum und weist eine zusätzliche Ausdehnung der Farbe Blau um 50 Pixel nach rechts auf.

Die lineGradientStyle()-Methode entspricht der beginGradientFill()-Methode, mit der Ausnahme, dass Sie neben der Festlegung des Farbverlaufs vor dem Zeichnen auch die Strichstärke mit der lineStyle()-Methode angeben müssen. Mit dem folgenden Code wird ein Feld mit einem Rot-Grün-Blau-Farbverlaufsstrich erstellt:

var myShape:Shape = new Shape(); 
var gradientBoxMatrix:Matrix = new Matrix(); 
gradientBoxMatrix.createGradientBox(200, 40, 0, 0, 0); 
myShape.graphics.lineStyle(5, 0); 
myShape.graphics.lineGradientStyle(GradientType.LINEAR, [0xFF0000, 0x00FF00, 0x0000FF], [1, 1, 1], [0, 128, 255], gradientBoxMatrix); 
myShape.graphics.drawRect(0, 0, 200, 40); 
this.addChild(myShape);

Weitere Informationen zur Matrix-Klasse finden Sie unter Verwenden von Matrix-Objekten.