Vorgehensweise: Erstellen eines linearen FarbverlaufsHow to: Create a Linear Gradient

GDI + enthält horizontale, vertikale und diagonale lineare Farbverläufen.GDI+ provides horizontal, vertical, and diagonal linear gradients. Standardmäßig ändert sich die Farbe in einem linearen Farbverlauf einheitlich.By default, the color in a linear gradient changes uniformly. Allerdings können Sie einen linearen Farbverlauf anpassen, um die Farbe auf nicht einheitliche Weise zu ändern.However, you can customize a linear gradient so that the color changes in a non-uniform fashion.

Hinweis

In die Beispielen in diesem Artikel werden die Methoden, die von eines Steuerelements aufgerufen werden Paint -Ereignishandler.The examples in this article are methods that are called from a control's Paint event handler.

Im folgenden Beispiel wird eine Zeile, einer Ellipse und ein Rechteck mit einem horizontalen linearen Farbverlaufspinsel.The following example fills a line, an ellipse, and a rectangle with a horizontal linear gradient brush.

Die LinearGradientBrush Konstruktor empfängt vier Argumente: zwei Punkte und zwei Farben aus.The LinearGradientBrush constructor receives four arguments: two points and two colors. Der erste Punkt (0, 10) bezieht sich auf die erste Farbe (Rot), und der zweite Punkt ("200", "10") bezieht sich auf die zweite Farbe (Blau).The first point (0, 10) is associated with the first color (red), and the second point (200, 10) is associated with the second color (blue). Erwartungsgemäß, die Linie gezeichnet werden (0, 10), ("200", "10") ändert sich allmählich von Rot zu Blau.As you would expect, the line drawn from (0, 10) to (200, 10) changes gradually from red to blue.

Die Werte 10 in die Punkte ("0", "10") und (200, 10) sind nicht wichtig.The 10s in the points (0, 10) and (200, 10) are not important. Wichtig ist, dass die beiden Punkte derselben zweite Koordinate haben – verbindenden Linie ist horizontal.What is important is that the two points have the same second coordinate — the line connecting them is horizontal. Die Ellipse und des Rechtecks ändert sich auch allmählich von Rot zu Blau im Laufe der der horizontalen Koordinate von 0 bis 200.The ellipse and the rectangle also change gradually from red to blue as the horizontal coordinate goes from 0 to 200.

Die folgende Abbildung zeigt die Zeile, das die Ellipse und das Rechteck.The following illustration shows the line, the ellipse, and the rectangle. Beachten Sie, dass der Farbverlauf wird wiederholt, wie die horizontale Koordinate 200 überschreitet.Note that the color gradient repeats itself as the horizontal coordinate increases beyond 200.

Eine Zeile, einer Ellipse und ein Rechteck ausgefüllt mit einem Farbverlauf.

Verwenden Sie horizontale lineare FarbverläufeTo use horizontal linear gradients

  • Übergeben Sie das nicht transparente Rot und Blau als die dritte und vierte Argument.Pass in the opaque red and opaque blue as the third and fourth argument, respectively.

    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 der Farbkomponenten linear wie die Umstellung von einer horizontalen Koordinate 0 auf eine horizontale Koordinate von 200.In the preceding example, the color components change linearly as you move from a horizontal coordinate of 0 to a horizontal coordinate of 200. Beispielsweise müssen ein Punkt, dessen erste Koordinate in der Mitte zwischen 0 und 200 wird, eine blaue Komponente, die in der Mitte zwischen 0 und 255 ist.For example, a point whose first coordinate is halfway between 0 and 200 will have a blue component that is halfway between 0 and 255.

GDI + können Sie, wie eine Farbe aus einer Kante eines Farbverlaufs in den anderen anzupassen.GDI+ allows you to adjust the way a color varies from one edge of a gradient to the other. Nehmen wir an, dass einen Pinsel mit Farbverlauf zu erstellen, der von Schwarz ändert sich in Rot gemäß der folgenden Tabelle werden soll.Suppose you want to create a gradient brush that changes from black to red according to the following table.

Horizontale KoordinateHorizontal coordinate RGB-KomponentenRGB components
00 (0, 0, 0)(0, 0, 0)
4040 (128, 0, 0)(128, 0, 0)
200200 (255, 0, 0)(255, 0, 0)

Beachten Sie, dass der Rotanteil auf halbe Intensität ist, wenn die horizontale Koordinate nur 20 Prozent der die Möglichkeit von 0 bis 200 ist.Note that the red component is at half intensity when the horizontal coordinate is only 20 percent of the way from 0 to 200.

Im folgenden Beispiel wird die LinearGradientBrush.Blend Eigenschaft, drei relativen Positionen drei relative Intensitäten zugeordnet werden soll.The following example sets the LinearGradientBrush.Blend property to associate three relative intensities with three relative positions. Wie in der obigen Tabelle wird die relative Intensität von 0,5 eine relative Position von 0,2 zugeordnet.As in the preceding table, a relative intensity of 0.5 is associated with a relative position of 0.2. Der Code füllt einer Ellipse und ein Rechteck mit dem Pinsel mit Farbverlauf.The code fills an ellipse and a rectangle with the gradient brush.

Die folgende Abbildung zeigt das resultierende Ellipse und das Rechteck.The following illustration shows the resulting ellipse and rectangle.

Eine Ellipse und ein Rechteck, die mit einem horizontalen Farbverlauf gefüllt werden.

Lineare Farbverläufe anpassenTo customize linear gradients

  • Übergeben Sie die deckend Schwarz und Rot als die dritte und vierte Argument.Pass in the opaque black and opaque red as the third and fourth argument, respectively.

    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 wurden horizontale; d. h. ändert die Farbe allmählich während des Verschiebens auf einer horizontalen Linie im.The gradients in the preceding examples have been horizontal; that is, the color changes gradually as you move along any horizontal line. Sie können auch die vertikale und diagonale Farbverläufe definieren.You can also define vertical gradients and diagonal gradients.

Das folgende Beispiel übergibt die Punkte ("0", "0") und (200, 100), um eine LinearGradientBrush Konstruktor.The following example passes the points (0, 0) and (200, 100) to a LinearGradientBrush constructor. Die Farbe Blau zugeordnet ist (0, 0), und die Farbe Grün zugeordnet ist (200, 100).The color blue is associated with (0, 0), and the color green is associated with (200, 100). Eine Zeile (mit Stiftbreite 10) und eine Ellipse sind mit Pinsels mit linearem Farbverlauf gefüllt.A line (with pen width 10) and an ellipse are filled with the linear gradient brush.

Die folgende Abbildung zeigt die Zeile und der Ellipse.The following illustration shows the line and the ellipse. Beachten Sie, dass die Farbe in der Ellipse ändert sich allmählich entlang einer auf die Linie wird parallel zu der Zeile durchläuft (0, 0) und (200, 100).Note that the color in the ellipse changes gradually as you move along any line that is parallel to the line passing through (0, 0) and (200, 100).

Eine Zeile und eine Ellipse, die mit einer diagonalen Farbverlauf gefüllt werden.

Zum Erstellen der diagonaler linearer FarbverläufenTo create diagonal linear gradients

  • Übergeben Sie das nicht transparente Blau und Grün als die dritte und vierte Argument.Pass in the opaque blue and opaque green as the third and fourth argument, respectively.

    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 auchSee also