Gewusst wie: Erstellen eines linearen Pfadfarbverlaufs

Artikel
08/10/2011

Mit der PathGradientBrush-Klasse können Sie die Art und Weise anpassen, in der eine Form mit einem graduellen Farbwechsel ausgefüllt wird. Sie können beispielsweise eine Farbe für die Mitte eines Pfades und eine andere Farbe für die Begrenzung eines Pfades festlegen. Außerdem können Sie für verschiedene Punkte entlang der Pfadbegrenzung jeweils eine andere Farbe angeben.

Tipp

In GDI+ ist ein Pfad eine Abfolge von Linien und Kurven, die von einem GraphicsPath-Objekt verwaltet werden. Weitere Informationen zu Pfaden in GDI+ finden Sie unter Grafikpfade in GDI+ und unter Erstellen und Zeichnen von Pfaden.

So füllen Sie eine Ellipse mit einem Pfadfarbverlauf aus

Im folgenden Beispiel wird eine Ellipse mit einem Pinsel mit Pfadfarbverlauf ausgefüllt. Als Innenfarbe wird Blau und als Farbe der Begrenzung Hellblau festgelegt. In der folgenden Abbildung ist die ausgefüllte Ellipse dargestellt.

Farbverlaufspfad

In der Standardeinstellung kann ein Pinsel mit Pfadfarbverlauf nicht außerhalb der Pfadbegrenzung eingesetzt werden. Wenn Sie mithilfe eines Pinsels mit Pfadfarbverlauf eine Form ausfüllen möchten, die die Pfadbegrenzung überschreitet, wird der Bildschirmbereich außerhalb des Pfads nicht ausgefüllt.

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

Farbverlaufspfad

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

        // 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);

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

So legen Sie Punkte auf der Begrenzung fest

Im folgenden Beispiel wird ein Pinsel mit Pfadfarbverlauf auf der Grundlage eines sternförmigen Pfades erstellt. Durch den Code wird die CenterColor-Eigenschaft festgelegt, mit der Rot als Farbe des Sternschwerpunkts festgelegt wird. Anschließend wird durch den Code die SurroundColors-Eigenschaft festgelegt, um für die einzelnen Punkte im colors-Array verschiedene (im points-Array gespeicherte) Farben anzugeben. Durch die letzte Codeanweisung wird der sternförmige Pfad mithilfe des Pinsels mit Pfadfarbverlauf ausgefüllt.

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

        // 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);

Im folgenden Beispiel wird ein Pfadfarbverlauf ohne ein GraphicsPath-Objekt im Code gezeichnet. Der spezielle PathGradientBrush-Konstruktor in diesem Beispiel empfängt ein Array aus Punkten, benötigt jedoch kein GraphicsPath-Objekt. Beachten Sie außerdem, dass mit dem PathGradientBrush-Pinsel ein Rechteck ausgefüllt wird und kein Pfad. Das Rechteck ist größer als der geschlossene Pfad, der zum Definieren des Pinsels verwendet wird, daher wird ein Teil des Rechtecks nicht mit dem Pinsel ausgefüllt. In der folgenden Abbildung sind das Rechteck (punktierte Linie) und der Bereich des Rechtecks dargestellt, der mit dem Pinsel mit Pfadfarbverlauf ausgefüllt wird.

Farbverlauf

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

// 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));

So passen Sie einen Pfadfarbverlauf an

Eine Möglichkeit zum Anpassen eines Pinsels mit Pfadfarbverlauf besteht darin, die FocusScales-Eigenschaft festzulegen. Die Fokusskalierung gibt einen inneren Pfad an, der innerhalb des Hauptpfades liegt. Die Innenfarbe wird im ganzen Bereich innerhalb des inneren Pfades angezeigt, nicht nur im Mittelpunkt.

Im folgenden Beispiel wird ein Pinsel mit Pfadfarbverlauf auf der Grundlage eines elliptischen Pfades erstellt. Durch den Code wird als Farbe der Begrenzung Blau und als Innenfarbe Hellblau festgelegt. Anschließend wird der elliptische Pfad mit dem Pinsel mit Pfadfarbverlauf ausgefüllt.

Als nächstes wird durch den Code die Fokusskalierung des Pinsels mit Pfadfarbverlauf festgelegt. Als x-Fokusskalierung wird 0,3 und als y-Fokusskalierung wird 0,8 festgelegt. Der Code ruft die TranslateTransform-Methode eines Graphics-Objekts auf, sodass der nachfolgende Aufruf von FillPath eine Ellipse ausfüllt, die sich rechts von der ersten Ellipse befindet.

Um sich die Auswirkung der Fokusskalierung zu vergegenwärtigen, stellen Sie sich eine kleine Ellipse vor, die den gleichen Mittelpunkt hat wie die Hauptellipse. Die kleine (innere) Ellipse entspricht der Hauptellipse, die (um den eigenen Mittelpunkt) in horizontaler Richtung um den Faktor 0.3 und in vertikaler Richtung um den Faktor 0.8 skaliert wurde. Auf dem Weg von der Begrenzung der äußeren Ellipse zur Begrenzung der inneren Ellipse ändert sich die Farbe graduell von Blau zu Hellblau. Von der Begrenzung der inneren Ellipse zum Mittelpunkt der beiden Ellipsen bleibt die Farbe unverändert Hellblau.

In der nachstehenden Abbildung ist das Ergebnis des folgenden Codes dargestellt. Die linke Ellipse ist nur im Mittelpunkt hellblau. Die rechte Ellipse ist im ganzen Bereich innerhalb des inneren Pfades hellblau.

Farbverlauf

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

// 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);

So passen Sie mithilfe von Interpolation an

Eine weitere Möglichkeit, einen Pinsel mit Pfadfarbverlauf anzupassen, besteht darin, ein Array von Interpolationsfarben und ein Array von Interpolationspositionen festzulegen.

Im folgenden Beispiel wird ein Pinsel mit Pfadfarbverlauf auf der Grundlage eines Dreiecks erstellt. Der Code legt für einen Pinsel mit Pfadfarbverlauf die InterpolationColors-Eigenschaft fest, um ein Array von Interpolationsfarben (Dunkelgrün, Hellblau, Blau) und ein Array von Interpolationspositionen (0, 0.25, 1) anzugeben. Von der Begrenzung des Dreiecks zu seinem Mittelpunkt ändert sich die Farbe graduell von Dunkelgrün zu Hellblau und dann von Hellblau zu Blau. Der Wechsel von Dunkelgrün zu Hellblau vollzieht sich auf einer Strecke, die 25 Prozent der Entfernung von Dunkelgrün nach Blau ausmacht.

In der folgenden Abbildung ist das Dreieck dargestellt, das mit dem benutzerdefinierten Pinsel mit Pfadfarbverlauf ausgefüllt wurde.

Farbverlaufspfad

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

// 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);

So legen Sie den Mittelpunkt fest

Der Mittelpunkt des Pfadfarbverlaufs liegt standardmäßig auf dem Schwerpunkt des Pfades, der zum Erstellen des Pinsels verwendet wird. Sie können die Position des Mittelpunkts ändern, indem Sie die CenterPoint-Eigenschaft der PathGradientBrush-Klasse festlegen.

Im folgenden Beispiel wird ein Pinsel mit Pfadfarbverlauf auf der Grundlage einer Ellipse erstellt. Der Mittelpunkt der Ellipse liegt bei (70, 35), der Mittelpunkt des Pfadfarbverlaufs wird jedoch auf (120, 40) festgelegt.

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

        // 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);

In der folgenden Abbildung sind die ausgefüllte Ellipse und der Mittelpunkt des Pfadfarbverlaufs dargestellt.

Farbverlaufspfad

Als Mittelpunkt des Pfadfarbverlaufs kann auch eine Position außerhalb des Pfades, der zum Erstellen des Pinsels verwendet wird, festgelegt werden. Im folgenden Beispiel wird der im vorherigen Beispiel verwendete Aufruf zum Festlegen der CenterPoint-Eigenschaft ersetzt.
```
pthGrBrush.CenterPoint = New PointF(145, 35)
```
```
pthGrBrush.CenterPoint = new PointF(145, 35);
```
In der folgenden Abbildung ist das Ergebnis nach der Änderung dargestellt.

Die Farbe der Punkte, die sich in der obigen Abbildung ganz rechts in der Ellipse befinden, entspricht keinem reinen Blau (obwohl sie nicht weit davon entfernt ist). Die Farben im Farbverlauf werden so positioniert, als würde die Füllung den Punkt (145, 35) erreichen, der ein reines Blau (0, 0, 255) darstellt. Die Füllung erreicht jedoch niemals (145, 35), da ein Pinsel mit Pfadfarbverlauf nur innerhalb seiner Pfadgrenzen zeichnen kann.

Kompilieren des Codes

Die vorangehenden Beispiele sind für die Verwendung mit Windows Forms konzipiert und erfordern PaintEventArgs e, einen Parameter des Paint-Ereignishandlers.

Siehe auch

Weitere Ressourcen

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

Freigeben über

Gewusst wie: Erstellen eines linearen Pfadfarbverlaufs

So füllen Sie eine Ellipse mit einem Pfadfarbverlauf aus

So legen Sie Punkte auf der Begrenzung fest

So passen Sie einen Pfadfarbverlauf an

So passen Sie mithilfe von Interpolation an

So legen Sie den Mittelpunkt fest

Kompilieren des Codes

Siehe auch

Weitere Ressourcen

Zusätzliche Ressourcen