Freigeben über


Erstellen eines Pfadfarbverlaufs

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.

**Hinweis   **In GDI+ ist ein Pfad eine Abfolge von Linien und Kurven, die von einem GraphicsPath-Objekt verwaltet werden. Weitere Informationen über GDI+-Pfade finden Sie unter Pfade und Erstellen und Zeichnen von Pfaden.

Im folgenden Beispiel wird eine Ellipse mit einem Pinsel mit Pfadfarbverlauf ausgefüllt. Als Innenfarbe wird Blau und als Farbe der Begrenzung Hellblau 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 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)
[C#]
// 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);

In der folgenden Abbildung ist die ausgefüllte Ellipse dargestellt.

Bei Verwendung eines Pinsels mit Pfadfarbverlauf werden Formen standardmäßig nur innerhalb der Pfadgrenze ausgefüllt. Wenn Sie eine Figur, die über die Pfadgrenzen hinausgeht, mit einem Pinsel mit Pfadfarbverlauf ausfüllen, wird der Bildschirmbereich außerhalb des Pfades nicht ausgefüllt.

Die folgende Abbildung zeigt, was geschieht, wenn Sie den FillEllipse-Aufruf im letzten Codebeispiel durch e.Graphics.FillRectangle(pthGrBrush, 0, 10, 200, 40) ersetzen.

Festlegen von Punkten auf der Begrenzung

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 die Farbe des Sternschwerpunkts als Rot definiert wird. Anschließend wird durch den Code die SurroundColors-Eigenschaft festgelegt, um für die einzelnen Punkte im points-Array verschiedene (im colors-Array gespeicherte) Farben anzugeben. Durch die letzte Codeanweisung wird der sternförmige Pfad mit Hilfe 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)
[C#]
// 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);

In der folgenden Abbildung ist der ausgefüllte Stern dargestellt.

Im folgenden Beispiel wird ein Pinsel mit Pfadfarbverlauf auf der Grundlage eines Punktearrays erstellt. Jedem der fünf Punkte im Array wird eine Farbe zugeordnet. Wenn Sie die fünf Punkte mit geraden Linien verbinden würden, würden Sie ein fünfseitiges Polygon erhalten. Auch dem Mittelpunkt (Schwerpunkt) des Polygons wird eine Farbe zugeordnet – in diesem Beispiel wird für den Mittelpunkt (80, 75) die Farbe Weiß festgelegt. Durch die letzte Anweisung im Beispiel wird ein Rechteck mit Hilfe eines Pinsels mit Pfadfarbverlauf ausgefüllt.

Am Punkt (80, 75) wird das Rechteck mit der Farbe Weiß ausgefüllt. Die Farbe ändert sich auf dem Weg zwischen diesem Punkt und den anderen Punkten im Array graduell. Auf dem Weg von (80, 75) zu (0, 0) findet beispielsweise ein gradueller Farbwechsel von Weiß zu Rot statt und auf dem Weg von (80, 75) zu (160, 0) ein gradueller Farbwechsel von Weiß zu Grün.

' 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))
[C#]
// 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));

Beachten Sie, dass der oben stehende Code kein GraphicsPath-Objekt enthält. 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 PathGradient-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.

Anpassen eines Pfadfarbverlaufs

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 die Farbe der Begrenzung auf Blau und die Innenfarbe auf Hellblau gesetzt. 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. Die x-Fokusskalierung wird auf 0.3 und die y-Fokusskalierung auf 0.8 gesetzt. Der Code ruft die TranslateTransform-Methode eines Graphics-Objekts auf, so dass 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.

' 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(220F, 0F)
e.Graphics.FillPath(pthGrBrush, path)
[C#]
// 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);

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

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.

' 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() =  { _
   0F, _
   0.4F, _
   1F}

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)
[C#]
// 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);

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

Festlegen des Mittelpunkts

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)
[C#]
// 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.

Der Mittelpunkt des Pfadfarbverlaufs kann auch auf eine Position außerhalb des Pfades, der zum Erstellen des Pinsels verwendet wird, gesetzt werden. Im folgenden Beispiel wird der im vorherigen Beispiel verwendete Aufruf zum Setzen der CenterPoint-Eigenschaft ersetzt.

pthGrBrush.CenterPoint = New PointF(145, 35)
[C#]
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.