Vorgehensweise: Erstellen eines linearen Farbverlaufs

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.

Hinweis

Die Beispiele in diesem Artikel sind Methoden, die über den Paint-Ereignishandler eines Steuerelements aufgerufen werden.

Im folgenden Beispiel werden eine Linie, eine Ellipse und ein Rechteck mit einem horizontalen linearen Farbverlaufspinsel gefüllt.

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 „10“ in den Punkten (0, 10) und (200, 10) ist nicht relevant. Wichtig ist, dass die zweite Koordinate der beiden Punkte gleich ist. 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.

A line, an ellipse, and a rectangle filled with a color gradient.

So verwenden Sie horizontale, lineare Farbverläufe

  • Übergeben Sie deckendes Rot und deckendes Blau als drittes bzw. viertes Argument.

    public void UseHorizontalLinearGradients(PaintEventArgs e)
    {
        LinearGradientBrush linGrBrush = new LinearGradientBrush(
           new Point(0, 10),
           new Point(200, 10),
           Color.FromArgb(255, 255, 0, 0),   // Opaque red
           Color.FromArgb(255, 0, 0, 255));  // Opaque blue
    
        Pen pen = new Pen(linGrBrush);
    
        e.Graphics.DrawLine(pen, 0, 10, 200, 10);
        e.Graphics.FillEllipse(linGrBrush, 0, 30, 200, 100);
        e.Graphics.FillRectangle(linGrBrush, 0, 155, 500, 30);
    }
    
    Dim linGrBrush As New LinearGradientBrush( _
       New Point(0, 10), _
       New Point(200, 10), _
       Color.FromArgb(255, 255, 0, 0), _
       Color.FromArgb(255, 0, 0, 255))
    Dim pen As New Pen(linGrBrush)
    
    e.Graphics.DrawLine(pen, 0, 10, 200, 10)
    e.Graphics.FillEllipse(linGrBrush, 0, 30, 200, 100)
    e.Graphics.FillRectangle(linGrBrush, 0, 155, 500, 30)
    
    

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 Eigenschaft LinearGradientBrush.Blend so festgelegt, dass drei relativen Positionen drei relative Intensitäten zugeordnet werden. 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.

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

An ellipse and a rectangle filled with a horizontal color gradient.

So passen Sie lineare Farbverläufe an

  • Übergeben Sie deckendes Schwarz und deckendes Rot als drittes bzw. viertes Argument.

    public void CustomizeLinearGradients(PaintEventArgs e)
    {
        LinearGradientBrush linGrBrush = new LinearGradientBrush(
           new Point(0, 10),
           new Point(200, 10),
           Color.FromArgb(255, 0, 0, 0),     // Opaque black
           Color.FromArgb(255, 255, 0, 0));  // Opaque red
    
        float[] relativeIntensities = { 0.0f, 0.5f, 1.0f };
        float[] relativePositions = { 0.0f, 0.2f, 1.0f };
    
        //Create a Blend object and assign it to linGrBrush.
        Blend blend = new Blend();
        blend.Factors = relativeIntensities;
        blend.Positions = relativePositions;
        linGrBrush.Blend = blend;
    
        e.Graphics.FillEllipse(linGrBrush, 0, 30, 200, 100);
        e.Graphics.FillRectangle(linGrBrush, 0, 155, 500, 30);
    }
    
    Dim linGrBrush As New LinearGradientBrush( _
       New Point(0, 10), _
       New Point(200, 10), _
       Color.FromArgb(255, 0, 0, 0), _
       Color.FromArgb(255, 255, 0, 0))
    
    Dim relativeIntensities As Single() = {0.0F, 0.5F, 1.0F}
    Dim relativePositions As Single() = {0.0F, 0.2F, 1.0F}
    
    'Create a Blend object and assign it to linGrBrush.
    Dim blend As New Blend()
    blend.Factors = relativeIntensities
    blend.Positions = relativePositions
    linGrBrush.Blend = blend
    
    e.Graphics.FillEllipse(linGrBrush, 0, 30, 200, 100)
    e.Graphics.FillRectangle(linGrBrush, 0, 155, 500, 30)
    
    

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.

Im folgenden Beispiel werden die Punkte (0, 0) und (200, 100) an einen LinearGradientBrush-Konstruktor übergeben. 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.

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).

A line and an ellipse filled with a diagonal color gradient.

So erstellen Sie diagonale lineare Farbverläufe

  • Übergeben Sie deckendes Blau und deckendes Grün als drittes bzw. viertes Argument.

    public void CreateDiagonalLinearGradients(PaintEventArgs e)
    {
        LinearGradientBrush linGrBrush = new LinearGradientBrush(
           new Point(0, 0),
           new Point(200, 100),
           Color.FromArgb(255, 0, 0, 255),   // opaque blue
           Color.FromArgb(255, 0, 255, 0));  // opaque green
    
        Pen pen = new Pen(linGrBrush, 10);
    
        e.Graphics.DrawLine(pen, 0, 0, 600, 300);
        e.Graphics.FillEllipse(linGrBrush, 10, 100, 200, 100);
    }
    
    Dim linGrBrush As New LinearGradientBrush( _
       New Point(0, 0), _
       New Point(200, 100), _
       Color.FromArgb(255, 0, 0, 255), _
       Color.FromArgb(255, 0, 255, 0))
    ' opaque blue
    ' opaque green
    Dim pen As New Pen(linGrBrush, 10)
    
    e.Graphics.DrawLine(pen, 0, 0, 600, 300)
    e.Graphics.FillEllipse(linGrBrush, 10, 100, 200, 100)
    
    

Siehe auch