Vorgehensweise: Erstellen eines linearen Pfadfarbverlaufs

Artikel
05/04/2023

Mithilfe der Klasse PathGradientBrush können Sie die Art und Weise anpassen, in der Sie eine Form mit allmählich wechselnden Farben füllen. Sie können beispielsweise eine Farbe für die Mitte eines Pfads und eine andere Farbe für die Grenze eines Pfads angeben. Sie können auch separate Farben für jeden einzelnen Punkt entlang der Pfadbegrenzung festlegen.

Hinweis

In GDI+ ist ein Pfad eine Sequenz von Linien und Kurven, die von einem GraphicsPath-Objekt verwaltet wird. Weitere Informationen über GDI+-Pfade finden Sie unter Grafikpfade in GDI+ und Erstellen und Zeichnen von Pfaden.

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

So füllen Sie eine Ellipse mit einem Pfadverlauf

Im folgenden Beispiel wird ein Ellipse mit einem Pfadfarbverlaufspinsel gefüllt. Im Zentrum wird die Farbe auf Blau festgelegt, und an den Begrenzungen wird die Farbe Aquamarin angewendet. Die folgende Abbildung zeigt die ausgefüllte Ellipse.

Gradient Path fills an ellipse.

Standardmäßig erstreckt sich ein Pfadfarbverlaufspinsel nicht über die Pfadbegrenzung hinaus. Wenn Sie den Pfadfarbverlaufspinsel verwenden, um eine Figur zu füllen, die über die Pfadbegrenzung hinausgeht, wird der Bildschirmbereich außerhalb des Pfads nicht gefüllt.

Die folgende Abbildung zeigt, was passiert, wenn Sie den Graphics.FillEllipse-Aufruf im folgenden Code in e.Graphics.FillRectangle(pthGrBrush, 0, 10, 200, 40) ändern:

Gradient Path extended beyond boundary of the path.

public void FillEllipseWithPathGradient(PaintEventArgs e)
{
    // Create a path that consists of a single ellipse.
    GraphicsPath path = new GraphicsPath();
    path.AddEllipse(0, 0, 140, 70);

    // Use the path to construct a brush.
    PathGradientBrush pthGrBrush = new PathGradientBrush(path);

    // Set the color at the center of the path to blue.
    pthGrBrush.CenterColor = Color.FromArgb(255, 0, 0, 255);

    // Set the color along the entire boundary
    // of the path to aqua.
    Color[] colors = { Color.FromArgb(255, 0, 255, 255) };
    pthGrBrush.SurroundColors = colors;

    e.Graphics.FillEllipse(pthGrBrush, 0, 0, 140, 70);
}

' Create a path that consists of a single ellipse.
Dim path As New GraphicsPath()
path.AddEllipse(0, 0, 140, 70)

' Use the path to construct a brush.
Dim pthGrBrush As New PathGradientBrush(path)

' Set the color at the center of the path to blue.
pthGrBrush.CenterColor = Color.FromArgb(255, 0, 0, 255)

' Set the color along the entire boundary 
' of the path to aqua.
Dim colors As Color() = {Color.FromArgb(255, 0, 255, 255)}
pthGrBrush.SurroundColors = colors

e.Graphics.FillEllipse(pthGrBrush, 0, 0, 140, 70)

Das vorangehende Codebeispiel ist für die Verwendung mit Windows Forms konzipiert und erfordert „PaintEventArgs e“, einen Parameter von PaintEventHandler.

So geben Sie Punkte für die Begrenzung an

Das folgende Beispiel erzeugt einen Pfadfarbverlaufspinsel aus einem sternförmigen Pfad. Der Code legt die Eigenschaft CenterColor fest, wodurch die Farbe im Mittelpunkt des Sterns auf Rot eingestellt wird. Dann wird im Code die Eigenschaft SurroundColors festgelegt, um verschiedene Farben (die im Array colors gespeichert sind) an den einzelnen Punkten im Array points anzugeben. Die letzte Codeanweisung füllt den sternförmigen Pfad mit dem Pfadfarbverlaufspinsel.

public void ConstructBrushFromStarShapedPath(PaintEventArgs e)
{
    // Put the points of a polygon in an array.
    Point[] points = {
       new Point(75, 0),
       new Point(100, 50),
       new Point(150, 50),
       new Point(112, 75),
       new Point(150, 150),
       new Point(75, 100),
       new Point(0, 150),
       new Point(37, 75),
       new Point(0, 50),
       new Point(50, 50)};

    // Use the array of points to construct a path.
    GraphicsPath path = new GraphicsPath();
    path.AddLines(points);

    // Use the path to construct a path gradient brush.
    PathGradientBrush pthGrBrush = new PathGradientBrush(path);

    // Set the color at the center of the path to red.
    pthGrBrush.CenterColor = Color.FromArgb(255, 255, 0, 0);

    // Set the colors of the points in the array.
    Color[] colors = {
       Color.FromArgb(255, 0, 0, 0),
       Color.FromArgb(255, 0, 255, 0),
       Color.FromArgb(255, 0, 0, 255),
       Color.FromArgb(255, 255, 255, 255),
       Color.FromArgb(255, 0, 0, 0),
       Color.FromArgb(255, 0, 255, 0),
       Color.FromArgb(255, 0, 0, 255),
       Color.FromArgb(255, 255, 255, 255),
       Color.FromArgb(255, 0, 0, 0),
       Color.FromArgb(255, 0, 255, 0)};

    pthGrBrush.SurroundColors = colors;

    // Fill the path with the path gradient brush.
    e.Graphics.FillPath(pthGrBrush, path);
}

' Put the points of a polygon in an array.
Dim points As Point() = { _
   New Point(75, 0), _
   New Point(100, 50), _
   New Point(150, 50), _
   New Point(112, 75), _
   New Point(150, 150), _
   New Point(75, 100), _
   New Point(0, 150), _
   New Point(37, 75), _
   New Point(0, 50), _
   New Point(50, 50)}

' Use the array of points to construct a path.
Dim path As New GraphicsPath()
path.AddLines(points)

' Use the path to construct a path gradient brush.
Dim pthGrBrush As New PathGradientBrush(path)

' Set the color at the center of the path to red.
pthGrBrush.CenterColor = Color.FromArgb(255, 255, 0, 0)

' Set the colors of the points in the array.
Dim colors As Color() = { _
   Color.FromArgb(255, 0, 0, 0), _
   Color.FromArgb(255, 0, 255, 0), _
   Color.FromArgb(255, 0, 0, 255), _
   Color.FromArgb(255, 255, 255, 255), _
   Color.FromArgb(255, 0, 0, 0), _
   Color.FromArgb(255, 0, 255, 0), _
   Color.FromArgb(255, 0, 0, 255), _
   Color.FromArgb(255, 255, 255, 255), _
   Color.FromArgb(255, 0, 0, 0), _
   Color.FromArgb(255, 0, 255, 0)}

pthGrBrush.SurroundColors = colors

' Fill the path with the path gradient brush.
e.Graphics.FillPath(pthGrBrush, path)

Das folgende Beispiel zeichnet einen Pfadverlauf ohne ein GraphicsPath-Objekt im Code. Der spezielle PathGradientBrush-Konstruktor im Beispiel erhält ein Array von Punkten, benötigt aber kein GraphicsPath-Objekt. Beachten Sie auch, dass der PathGradientBrush zum Füllen eines Rechtecks und nicht eines Pfads verwendet wird. Das Rechteck ist größer als der geschlossene Pfad, der zur Definition des Pinsels verwendet wird, sodass ein Teil des Rechtecks nicht vom Pinsel gezeichnet wird. Die folgende Abbildung zeigt das Rechteck (gepunktete Linie) und den Teil des Rechtecks, der mit dem Pfadfarbverlaufspinsel gezeichnet wurde:

Gradient portion painted by the path gradient brush.

public void DrawPathGradentWthoutGraphicsPath(PaintEventArgs e)
{
    // Construct a path gradient brush based on an array of points.
    PointF[] ptsF = {
       new PointF(0, 0),
       new PointF(160, 0),
       new PointF(160, 200),
       new PointF(80, 150),
       new PointF(0, 200)};

    PathGradientBrush pBrush = new PathGradientBrush(ptsF);

    // An array of five points was used to construct the path gradient
    // brush. Set the color of each point in that array.
    Color[] colors = {
       Color.FromArgb(255, 255, 0, 0),  // (0, 0) red
       Color.FromArgb(255, 0, 255, 0),  // (160, 0) green
       Color.FromArgb(255, 0, 255, 0),  // (160, 200) green
       Color.FromArgb(255, 0, 0, 255),  // (80, 150) blue
       Color.FromArgb(255, 255, 0, 0)}; // (0, 200) red

    pBrush.SurroundColors = colors;

    // Set the center color to white.
    pBrush.CenterColor = Color.White;

    // Use the path gradient brush to fill a rectangle.
    e.Graphics.FillRectangle(pBrush, new Rectangle(0, 0, 160, 200));
}

' Construct a path gradient brush based on an array of points.
Dim ptsF As PointF() = { _
   New PointF(0, 0), _
   New PointF(160, 0), _
   New PointF(160, 200), _
   New PointF(80, 150), _
   New PointF(0, 200)}

Dim pBrush As New PathGradientBrush(ptsF)

' An array of five points was used to construct the path gradient
' brush. Set the color of each point in that array.  
'Point (0, 0) is red
'Point (160, 0) is green
'Point (160, 200) is green
'Point (80, 150) is blue
'Point (0, 200) is red
Dim colors As Color() = { _
   Color.FromArgb(255, 255, 0, 0), _
   Color.FromArgb(255, 0, 255, 0), _
   Color.FromArgb(255, 0, 255, 0), _
   Color.FromArgb(255, 0, 0, 255), _
   Color.FromArgb(255, 255, 0, 0)}
pBrush.SurroundColors = colors

' Set the center color to white.
pBrush.CenterColor = Color.White

' Use the path gradient brush to fill a rectangle.
e.Graphics.FillRectangle(pBrush, New Rectangle(0, 0, 160, 200))

So passen Sie einen Pfadverlauf an

Eine Möglichkeit zum Anpassen eines Pfadfarbverlaufspinsels besteht darin, seine FocusScales-Eigenschaft festzulegen. Die Fokusskala gibt einen inneren Pfad an, der innerhalb des Hauptpfads liegt. Die Farbe des Mittelpunkts wird überall in diesem inneren Pfad angezeigt und nicht nur am Mittelpunkt.

Das folgende Beispiel erstellt einen Pfadfarbverlaufspinsel, der auf einem elliptischen Pfad basiert. Der Code legt die Begrenzungsfarbe auf Blau fest, definiert als Farbe für den Mittelpunkt Aquamarin und verwendet dann den Pfadfarbverlaufspinsel, um den elliptischen Pfad zu füllen.

Als Nächstes legt der Code die Fokusskala des Pfadfarbverlaufspinsel fest. Die x-Fokusskala wird auf 0,3 festgelegt, die y-Fokusskala auf 0,8. Der Code ruft die TranslateTransform-Methode eines Graphics-Objekts auf, sodass der nachfolgende Aufruf von FillPath eine Ellipse füllt, die sich rechts neben der ersten Ellipse befindet.

Um die Wirkung der Fokusskalen zu sehen, stellen Sie sich eine kleine Ellipse vor, die sich ihren Mittelpunkt mit der Hauptellipse teilt. Die kleine (innere) Ellipse ist die Hauptellipse, die horizontal um den Faktor 0,3 und vertikal um den Faktor 0,8 skaliert ist (um ihren Mittelpunkt). Wenn Sie sich vom Rand der äußeren Ellipse zum Rand der inneren Ellipse bewegen, ändert sich die Farbe allmählich von Blau zu Aquamarin. Wenn Sie sich vom Rand der inneren Ellipse zum gemeinsamen Zentrum bewegen, bleibt die Farbe Aquamarin.

In der folgenden Abbildung ist das Ergebnis des angegebenen Codes dargestellt. Die Ellipse auf der linken Seite weist nur am Mittelpunkt die Farbe Aquamarin auf. Die Ellipse auf der rechten Seite erscheint überall innerhalb des inneren Pfads in Aquamarin.

Gradient effect of focus scales

public void CustomizePathGradientBrush(PaintEventArgs e)
{
    // Create a path that consists of a single ellipse.
    GraphicsPath path = new GraphicsPath();
    path.AddEllipse(0, 0, 200, 100);

    // Create a path gradient brush based on the elliptical path.
    PathGradientBrush pthGrBrush = new PathGradientBrush(path);

    // Set the color along the entire boundary to blue.
    Color[] color = { Color.Blue };
    pthGrBrush.SurroundColors = color;

    // Set the center color to aqua.
    pthGrBrush.CenterColor = Color.Aqua;

    // Use the path gradient brush to fill the ellipse.
    e.Graphics.FillPath(pthGrBrush, path);

    // Set the focus scales for the path gradient brush.
    pthGrBrush.FocusScales = new PointF(0.3f, 0.8f);

    // Use the path gradient brush to fill the ellipse again.
    // Show this filled ellipse to the right of the first filled ellipse.
    e.Graphics.TranslateTransform(220.0f, 0.0f);
    e.Graphics.FillPath(pthGrBrush, path);
}

' Create a path that consists of a single ellipse.
Dim path As New GraphicsPath()
path.AddEllipse(0, 0, 200, 100)

' Create a path gradient brush based on the elliptical path.
Dim pthGrBrush As New PathGradientBrush(path)

' Set the color along the entire boundary to blue.
' Changed variable name from color
Dim blueColor As Color() = {Color.Blue}
pthGrBrush.SurroundColors = blueColor

' Set the center color to aqua.
pthGrBrush.CenterColor = Color.Aqua

' Use the path gradient brush to fill the ellipse. 
e.Graphics.FillPath(pthGrBrush, path)

' Set the focus scales for the path gradient brush.
pthGrBrush.FocusScales = New PointF(0.3F, 0.8F)

' Use the path gradient brush to fill the ellipse again.
' Show this filled ellipse to the right of the first filled ellipse.
e.Graphics.TranslateTransform(220.0F, 0.0F)
e.Graphics.FillPath(pthGrBrush, path)

So führen Sie eine Anpassung mithilfe der Interpolation durch

Eine andere Möglichkeit zum Anpassen eines Pfadfarbverlaufspinsel besteht darin, eine Reihe von Interpolationsfarben und -positionen anzugeben.

Das folgende Beispiel erstellt einen Pfadfarbverlaufspinsel auf der Basis eines Dreiecks. Der Code legt die Eigenschaft InterpolationColors des Pfadfarbverlaufspinsels fest, um ein Array von Interpolationsfarben (Dunkelgrün, Aquamarin, Blau) und ein Array von Interpolationspositionen (0; 0,25; 1) anzugeben. Wenn Sie sich vom Rand des Dreiecks zum Mittelpunkt bewegen, ändert sich die Farbe allmählich von Dunkelgrün zu Aquamarin und dann von Aquamarin zu Blau. Der Wechsel von Dunkelgrün zu Aqua erfolgt innerhalb von 25 Prozent der Strecke von Dunkelgrün zu Blau.

Die folgende Abbildung zeigt das Dreieck, das mit dem benutzerdefinierten Pfadfarbverlaufspinsel gefüllt ist.

Triangle filled with custom path gradient brush.

public void CustomizeWithInterpolation(PaintEventArgs e)
{
    // Vertices of the outer triangle
    Point[] points = {
       new Point(100, 0),
       new Point(200, 200),
       new Point(0, 200)};

    // No GraphicsPath object is created. The PathGradientBrush
    // object is constructed directly from the array of points.
    PathGradientBrush pthGrBrush = new PathGradientBrush(points);

    Color[] colors = {
       Color.FromArgb(255, 0, 128, 0),    // dark green
       Color.FromArgb(255, 0, 255, 255),  // aqua
       Color.FromArgb(255, 0, 0, 255)};   // blue

    float[] relativePositions = {
       0f,       // Dark green is at the boundary of the triangle.
       0.4f,     // Aqua is 40 percent of the way from the boundary
                 // to the center point.
       1.0f};    // Blue is at the center point.

    ColorBlend colorBlend = new ColorBlend();
    colorBlend.Colors = colors;
    colorBlend.Positions = relativePositions;
    pthGrBrush.InterpolationColors = colorBlend;

    // Fill a rectangle that is larger than the triangle
    // specified in the Point array. The portion of the
    // rectangle outside the triangle will not be painted.
    e.Graphics.FillRectangle(pthGrBrush, 0, 0, 200, 200);
}

' Vertices of the outer triangle
Dim points As Point() = { _
   New Point(100, 0), _
   New Point(200, 200), _
   New Point(0, 200)}

' No GraphicsPath object is created. The PathGradientBrush
' object is constructed directly from the array of points.
Dim pthGrBrush As New PathGradientBrush(points)

' Create an array of colors containing dark green, aqua, and  blue.
Dim colors As Color() = { _
   Color.FromArgb(255, 0, 128, 0), _
   Color.FromArgb(255, 0, 255, 255), _
   Color.FromArgb(255, 0, 0, 255)}

' Dark green is at the boundary of the triangle.
' Aqua is 40 percent of the way from the boundary to the center point.
' Blue is at the center point.
Dim relativePositions As Single() = { _
   0.0F, _
   0.4F, _
   1.0F}

Dim colorBlend As New ColorBlend()
colorBlend.Colors = colors
colorBlend.Positions = relativePositions
pthGrBrush.InterpolationColors = colorBlend

' Fill a rectangle that is larger than the triangle
' specified in the Point array. The portion of the
' rectangle outside the triangle will not be painted.
e.Graphics.FillRectangle(pthGrBrush, 0, 0, 200, 200)

So legen Sie den Mittelpunkt fest

Standardmäßig befindet sich der Mittelpunkt eines Pfadfarbverlaufspinsels im Mittelpunkt des Pfads, der zum Erstellen des Pinsels verwendet wurde. Sie können die Position des Mittelpunkts ändern, indem Sie die Eigenschaft CenterPoint der Klasse PathGradientBrush festlegen.

Das folgende Beispiel erstellt einen Pfadfarbverlaufspinsel, der auf einer Ellipse basiert. Der Mittelpunkt der Ellipse liegt bei (70, 35), aber der Mittelpunkt des Pfadfarbverlaufspinsels ist auf (120, 40) festgelegt.

public void SetCenterPoint(PaintEventArgs e)
{
    // Create a path that consists of a single ellipse.
    GraphicsPath path = new GraphicsPath();
    path.AddEllipse(0, 0, 140, 70);

    // Use the path to construct a brush.
    PathGradientBrush pthGrBrush = new PathGradientBrush(path);

    // Set the center point to a location that is not
    // the centroid of the path.
    pthGrBrush.CenterPoint = new PointF(120, 40);

    // Set the color at the center of the path to blue.
    pthGrBrush.CenterColor = Color.FromArgb(255, 0, 0, 255);

    // Set the color along the entire boundary
    // of the path to aqua.
    Color[] colors = { Color.FromArgb(255, 0, 255, 255) };
    pthGrBrush.SurroundColors = colors;

    e.Graphics.FillEllipse(pthGrBrush, 0, 0, 140, 70);
}

' Create a path that consists of a single ellipse.
Dim path As New GraphicsPath()
path.AddEllipse(0, 0, 140, 70)

' Use the path to construct a brush.
Dim pthGrBrush As New PathGradientBrush(path)

' Set the center point to a location that is not
' the centroid of the path.
pthGrBrush.CenterPoint = New PointF(120, 40)

' Set the color at the center of the path to blue.
pthGrBrush.CenterColor = Color.FromArgb(255, 0, 0, 255)

' Set the color along the entire boundary 
' of the path to aqua.
Dim colors As Color() = {Color.FromArgb(255, 0, 255, 255)}
pthGrBrush.SurroundColors = colors

e.Graphics.FillEllipse(pthGrBrush, 0, 0, 140, 70)

Die folgende Abbildung zeigt die gefüllte Ellipse und den Mittelpunkt des Pfadfarbverlaufspinsels:

Gradient Path with filled ellipse and center point.

Sie können den Mittelpunkt eines Pfadfarbverlaufspinsels auf eine Position außerhalb des Pfads festlegen, der zum Erstellen des Pinsels verwendet wurde. Das folgende Beispiel ersetzt den Aufruf zum Festlegen der Eigenschaft CenterPoint im vorangegangenen Code.

public void SetCenterPointOutsidePath(PaintEventArgs e)
{
    // Create a path that consists of a single ellipse.
    GraphicsPath path = new GraphicsPath();
    path.AddEllipse(0, 0, 140, 70);

    // Use the path to construct a brush.
    PathGradientBrush pthGrBrush = new PathGradientBrush(path);

    // Set the center point to a location that is not
    // the centroid of the path.
    pthGrBrush.CenterPoint = new PointF(145, 35);

    // Set the color at the center of the path to blue.
    pthGrBrush.CenterColor = Color.FromArgb(255, 0, 0, 255);

    // Set the color along the entire boundary
    // of the path to aqua.
    Color[] colors = { Color.FromArgb(255, 0, 255, 255) };
    pthGrBrush.SurroundColors = colors;

    e.Graphics.FillEllipse(pthGrBrush, 0, 0, 140, 70);
}

pthGrBrush.CenterPoint = New PointF(145, 35)

Die folgende Abbildung zeigt die Ausgabe, die sich durch diese Änderung ergibt:

Gradient Path with center point outside the path.

In der vorangegangenen Abbildung sind die Punkte ganz rechts auf der Ellipse nicht rein Blau (obwohl sie dem sehr nahe kommen). Die Farben im Farbverlauf werden so positioniert, als würde die Füllung den Punkt (145, 35) erreichen, an dem die Farbe ein reines Blau (0, 0, 255) wäre. Aber die Füllung erreicht nie (145, 35), weil ein Pfadfarbverlaufspinsel nur innerhalb seines Pfads zeichnet.

Kompilieren des Codes

Die vorangegangenen Beispiele sind für die Verwendung mit Windows Forms konzipiert und erfordern „PaintEventArgse“, einen Parameter des Paint-Ereignishandlers.

Siehe auch

Verwenden eines Pinsels für Farbverläufe zum Ausfüllen von Formen

Freigeben über