Erstellen eines linearen Farbverlaufs

  • Artikel

GDI+ bietet horizontale, vertikale und diagonale lineare Farbverläufe. Standardmäßig ändert sich die Farbe in einem linearen Farbverlauf einheitlich. Sie können jedoch einen linearen Farbverlauf so anpassen, dass sich die Farbe nicht einheitlich ändert.

Horizontale lineare Farbverläufe

Im folgenden Beispiel wird ein horizontaler linearer Farbverlaufspinsel verwendet, um eine Linie, eine Ellipse und ein Rechteck auszufüllen:

LinearGradientBrush linGrBrush(
   Point(0, 10),
   Point(200, 10),
   Color(255, 255, 0, 0),   // opaque red
   Color(255, 0, 0, 255));  // opaque blue

Pen pen(&linGrBrush);

graphics.DrawLine(&pen, 0, 10, 200, 10);
graphics.FillEllipse(&linGrBrush, 0, 30, 200, 100);
graphics.FillRectangle(&linGrBrush, 0, 155, 500, 30);

Der LinearGradientBrush-Konstruktor empfängt vier Argumente: zwei Punkte und zwei Farben. Der erste Punkt (0, 10) ist der ersten Farbe (Rot) zugeordnet. Der zweite Punkt (200, 10) ist der zweiten Farbe (Blau) zugeordnet. Wie zu erwarten, geht die Farbe der von (0, 10) bis (200, 10) gezeichneten Linie nach und nach von Rot in Blau über.

Die 10er Jahre in den Punkten (50, 10) und (200, 10) sind nicht wichtig. Wichtig ist, dass die beiden Punkte die gleiche zweite Koordinate haben – die Linie, die sie verbindet, ist horizontal. Bei der Ellipse und dem Rechteck geht die Farbe ebenfalls nach und nach von Rot in Blau über, je weiter sich die horizontale Koordinate von 0 auf 200 erhöht.

Die folgende Abbildung zeigt die Linie, die Ellipse und das Rechteck. Beachten Sie, dass sich der Farbverlauf wiederholt, wenn die horizontale Koordinate den Wert 200 übersteigt.

Abbildung eines horizontalen Farbverlaufs, der eine Linie und eine Ellipse ausfüllt, und ein Rechteck, das länger als die Ellipse ist

Anpassen linearer Farbverläufe

Im vorherigen Beispiel ändern sich die Farbkomponenten linear, während sich die horizontale Koordinate von 0 auf 200 erhöht. Bei einem Punkt, dessen erste Koordinate auf halbem Weg zwischen 0 und 200 liegt, liegt die blaue Komponente mitten zwischen 0 und 255.

Mit GDI+ können Sie anpassen, wie eine Farbe innerhalb eines Farbverlaufs variieren soll. Angenommen, Sie möchten einen Farbverlaufspinsel erstellen, der nach der folgenden Tabelle von Schwarz in Rot übergeht:

Horizontale Koordinate RGB-Komponenten
0 (0, 0, 0)
40 (128, 0, 0)
200 (255, 0, 0)

 

Wie Sie sehen, erreicht die rote Komponente bei 20 Prozent des Weges zwischen 0 und 200 halbe Intensität.

Im folgenden Beispiel wird die LinearGradientBrush::SetBlend-Methode eines LinearGradientBrush-Objekts aufgerufen, um drei relativen Intensitäten drei relativen Positionen zuzuordnen. Wie bereits in der vorherigen Tabelle ist der relativen Position 0,2 eine relative Intensität von 0,5 zugeordnet. Der Code füllt eine Ellipse und ein Rechteck mit dem Farbverlaufspinsel.

LinearGradientBrush linGrBrush(
   Point(0, 10),
   Point(200, 10),
   Color(255, 0, 0, 0),     // opaque black 
   Color(255, 255, 0, 0));  // opaque red

REAL relativeIntensities[] = {0.0f, 0.5f, 1.0f};
REAL relativePositions[]   = {0.0f, 0.2f, 1.0f};

linGrBrush.SetBlend(relativeIntensities, relativePositions, 3);

graphics.FillEllipse(&linGrBrush, 0, 30, 200, 100);
graphics.FillRectangle(&linGrBrush, 0, 155, 500, 30);

Die folgende Abbildung zeigt die resultierende Ellipse und das resultierende Rechteck:

Abbildung eines horizontalen Farbverlaufs, der eine Ellipse und ein Rechteck ausfüllt, das länger als die Ellipse ist

Diagonale lineare Farbverläufe

Die Farbverläufe in den vorherigen Beispielen waren horizontale Farbverläufe. Das bedeutet, die Farbe ändert sich nach und nach entlang einer horizontalen Linie. Sie können auch vertikale Farbverläufe und diagonale Farbverläufe definieren. Der folgende Code übergibt die Punkte (0, 0) und (200, 100) an einen LinearGradientBrush-Konstruktor . Die Farbe Blau ist (0, 0) zugeordnet, und die Farbe Grün ist (200, 100) zugeordnet. Eine Linie (mit Stiftbreite 10) und eine Ellipse werden mit dem linearen Farbverlaufspinsel gefüllt.

LinearGradientBrush linGrBrush(
   Point(0, 0),
   Point(200, 100),
   Color(255, 0, 0, 255),   // opaque blue
   Color(255, 0, 255, 0));  // opaque green

Pen pen(&linGrBrush, 10);

graphics.DrawLine(&pen, 0, 0, 600, 300);
graphics.FillEllipse(&linGrBrush, 10, 100, 200, 100);

Die folgende Abbildung zeigt die Linie und die Ellipse. Wie Sie sehen, ändert sich die Farbe in der Ellipse nach und nach entlang einer beliebigen Parallele zur Linie von (0, 0) nach (200, 100).

Abbildung eines diagonalen Farbverlaufs, der eine Ellipse und eine diagonale Linie ausfüllt