Erstellen eines Pfadverlaufs

  • Artikel

Mit der PathGradientBrush-Klasse können Sie die Art und Weise anpassen, wie Sie eine Form mit sich allmählich ändernden Farben füllen. Ein PathGradientBrush-Objekt verfügt über einen Begrenzungspfad und einen Mittelpunkt. Sie können eine Farbe für den Mittelpunkt und eine andere Farbe für die Begrenzung angeben. Sie können auch separate Farben für jeden von mehreren Punkten entlang der Grenze angeben.

Hinweis

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

 

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.

// Create a path that consists of a single ellipse.
GraphicsPath path;
path.AddEllipse(0, 0, 140, 70);

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

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

// Set the color along the entire boundary of the path to aqua.
Color colors[] = {Color(255, 0, 255, 255)};
int count = 1;
pthGrBrush.SetSurroundColors(colors, &count);

graphics.FillEllipse(&pthGrBrush, 0, 0, 140, 70);

Die folgende Abbildung zeigt die ausgefüllte Ellipse.

Abbildung einer Ellipse mit einer Farbverlaufsfüllung

Standardmäßig erstreckt sich ein Pfadfarbverlaufspinsel nicht über die Pfadbegrenzung hinaus. Wenn Sie den Pfadverlaufspinsel verwenden, um eine Form auszufüllen, die über die Begrenzung des Pfads hinausgeht, wird der Bereich des Bildschirms außerhalb des Pfads nicht gefüllt. Die folgende Abbildung zeigt, was geschieht, wenn Sie den Graphics::FillEllipse-Aufruf im vorherigen Code in graphics.FillRectangle(&pthGrBrush, 0, 10, 200, 40)ändern.

Abbildung eines horizontalen Slices der vorherigen Ellipse

Angeben von Punkten an der Grenze

Das folgende Beispiel erzeugt einen Pfadfarbverlaufspinsel aus einem sternförmigen Pfad. Der Code ruft die PathGradientBrush::SetCenterColor-Methode auf, um die Farbe im Zentrum des star auf Rot festzulegen. Anschließend ruft der Code die PathGradientBrush::SetSurroundColors-Methode auf, um verschiedene Farben (gespeichert im Farbarray ) an den einzelnen Punkten im Punktearray anzugeben. Die letzte Codeanweisung füllt den sternförmigen Pfad mit dem Pfadfarbverlaufspinsel.

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

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

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

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

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

int count = 10;
pthGrBrush.SetSurroundColors(colors, &count);

// Fill the path with the path gradient brush.
graphics.FillPath(&pthGrBrush, &path);

Die folgende Abbildung zeigt die ausgefüllte star.

Abbildung eines fünfzeiligen star, der sich von rot in der Mitte zu verschiedenen Farben in jedem Punkt des star

Im folgenden Beispiel wird ein Pfadverlaufspinsel basierend auf einem Array von Punkten erstellt. Jedem der fünf Punkte im Array wird eine Farbe zugewiesen. Wenn Sie die fünf Punkte durch gerade Linien verbinden würden, erhalten Sie ein fünfseitiges Polygon. Dem Mittelpunkt dieses Polygons wird auch eine Farbe zugewiesen. In diesem Beispiel wird die Mitte (80, 75) auf Weiß festgelegt. Die letzte Code-Anweisung im Beispiel füllt ein Rechteck mit dem Pfadverlaufspinsel.

Die Zum Ausfüllen des Rechtecks verwendete Farbe ist bei (80, 75) weiß und ändert sich allmählich, wenn Sie sich von (80, 75) zu den Punkten im Array bewegen. Wenn Sie beispielsweise von (80, 75) zu (0, 0) wechseln, ändert sich die Farbe schrittweise von weiß zu rot, und wenn Sie von (80, 75) zu (160, 0) wechseln, ändert sich die Farbe allmählich von weiß zu grün.

// Construct a path gradient brush based on an array of points.
PointF ptsF[] = {PointF(0.0f, 0.0f), 
                 PointF(160.0f, 0.0f), 
                 PointF(160.0f, 200.0f),
                 PointF(80.0f, 150.0f),
                 PointF(0.0f, 200.0f)};

PathGradientBrush pBrush(ptsF, 5);

// 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(255, 255, 0, 0),  // (0, 0) red
                  Color(255, 0, 255, 0),  // (160, 0) green
                  Color(255, 0, 255, 0),  // (160, 200) green
                  Color(255, 0, 0, 255),  // (80, 150) blue
                  Color(255, 255, 0, 0)}; // (0, 200) red

int count = 5;
pBrush.SetSurroundColors(colors, &count);

// Set the center color to white.
pBrush.SetCenterColor(Color(255, 255, 255, 255));

// Use the path gradient brush to fill a rectangle.
graphics.FillRectangle(&pBrush, Rect(0, 0, 180, 220));

Beachten Sie, dass im vorherigen Code kein GraphicsPath-Objekt vorhanden ist. Der bestimmte PathGradientBrush-Konstruktor im Beispiel empfängt einen Zeiger auf ein Array von Punkten, erfordert jedoch kein GraphicsPath-Objekt . Beachten Sie außerdem, dass der Pfadverlaufspinsel verwendet wird, um ein Rechteck zu füllen, nicht einen Pfad. Das Rechteck ist größer als der Pfad, der zum Definieren des Pinsels verwendet wird, sodass ein Teil des Rechtecks nicht vom Pinsel gemalt wird. Die folgende Abbildung zeigt das Rechteck (gepunktete Linie) und den Teil des Rechtecks, der vom Pfadverlaufspinsel gezeichnet wurde.

Abbildung eines Rechtecks, das durch eine gepunktete Linie begrenzt ist, teilweise durch einen mehrfarbigen Farbverlauf gezeichnet

Anpassen eines Pfadverlaufs

Eine Möglichkeit zum Anpassen eines Pfadverlaufspinsels besteht darin, seine Fokusskalen 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. Um die Fokusskalen eines Pfadverlaufspinsel festzulegen, rufen Sie die PathGradientBrush::SetFocusScales-Methode auf.

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 Fokusskalen des Pfadverlaufspinsels fest. Die x-Fokusskala wird auf 0,3 festgelegt, die y-Fokusskala auf 0,8. Der Code ruft die Graphics::TranslateTransform-Methode eines Graphics-Objekts auf, damit der nachfolgende Aufruf von Graphics::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.

// Create a path that consists of a single ellipse.
GraphicsPath path;
path.AddEllipse(0, 0, 200, 100);

// Create a path gradient brush based on the elliptical path.
PathGradientBrush pthGrBrush(&path);
pthGrBrush.SetGammaCorrection(TRUE);

// Set the color along the entire boundary to blue.
Color color(Color(255, 0, 0, 255));
INT num = 1;
pthGrBrush.SetSurroundColors(&color, &num);

// Set the center color to aqua.
pthGrBrush.SetCenterColor(Color(255, 0, 255, 255));
 
// Use the path gradient brush to fill the ellipse. 
graphics.FillPath(&pthGrBrush, &path);

// Set the focus scales for the path gradient brush.
pthGrBrush.SetFocusScales(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.
graphics.TranslateTransform(220.0f, 0.0f);
graphics.FillPath(&pthGrBrush, &path);

Die folgende Abbildung zeigt die Ausgabe des vorherigen Codes. 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.

Abbildung, die zwei Auslassungspunkte zeigt, die von Aqua zu Blau schattieren: die erste hat sehr wenig Aqua; die zweite hat viel mehr

Eine weitere Möglichkeit zum Anpassen eines Pfadverlaufspinsels besteht darin, ein Array von voreingestellten Farben und ein Array von Interpolationspositionen anzugeben.

Das folgende Beispiel erstellt einen Pfadfarbverlaufspinsel auf der Basis eines Dreiecks. Der Code ruft die PathGradientBrush::SetInterpolationColors-Methode des Pfadverlaufs-Pinsels auf, um ein Array von Interpolationsfarben (dunkelgrün, aqua, 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.

// Vertices of the triangle
Point points[] = {Point(100, 0), 
                  Point(200, 200), 
                  Point(0, 200)};

// No GraphicsPath object is created. The PathGradient
// brush is constructed directly from the array of points.
PathGradientBrush pthGrBrush(points, 3);

Color presetColors[] = {
   Color(255, 0, 128, 0),    // Dark green
   Color(255, 0, 255, 255),  // Aqua
   Color(255, 0, 0, 255)};   // Blue

REAL interpPositions[] = {
   0.0f,   // Dark green is at the boundary of the triangle.
   0.25f,  // Aqua is 25 percent of the way from the boundary
           // to the center point.
   1.0f};  // Blue is at the center point.
                  
pthGrBrush.SetInterpolationColors(presetColors, interpPositions, 3);

// 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.
graphics.FillRectangle(&pthGrBrush, 0, 0, 200, 200);

Die folgende Abbildung zeigt die Ausgabe des vorherigen Codes.

Abbildung eines Dreiecks, das von Blau in der Mitte über Aqua bis grün an den Rändern schattiert

Festlegen des Mittelpunktpunkts

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 Mittelpunktpunkts ändern, indem Sie die PathGradientBrush::SetCenterPoint-Methode der PathGradientBrush-Klasse aufrufen.

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.

// Create a path that consists of a single ellipse.
GraphicsPath path;
path.AddEllipse(0, 0, 140, 70);

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

// Set the center point to a location that is not the centroid of the path.
pthGrBrush.SetCenterPoint(Point(120, 40));

// Set the color at the center point to blue.
pthGrBrush.SetCenterColor(Color(255, 0, 0, 255));

// Set the color along the entire boundary of the path to aqua.
Color colors[] = {Color(255, 0, 255, 255)};
int count = 1;
pthGrBrush.SetSurroundColors(colors, &count);

graphics.FillEllipse(&pthGrBrush, 0, 0, 140, 70);

Die folgende Abbildung zeigt die gefüllte Ellipse und den Mittelpunkt des Pfadverlaufspinsels.

Abbildung einer Ellipse, die sich von einem Mittelpunkt in der Nähe eines Endes von Blau zu Aqua füllt

Sie können den Mittelpunkt eines Pfadfarbverlaufspinsels auf eine Position außerhalb des Pfads festlegen, der zum Erstellen des Pinsels verwendet wurde. Wenn Sie im vorherigen Code den Aufruf von PathGradientBrush::SetCenterPoint durch pthGrBrush.SetCenterPoint(Point(145, 35))ersetzen, erhalten Sie das folgende Ergebnis.

Abbildung einer Ellipse, die von einem Mittelpunkt außerhalb des Rands der Ellipse von rot nach gelb füllt

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 sind so positioniert, als hätte die Füllung den Punkt (145, 35) erreichen dürfen, hätte die Farbe reines Blau erreicht (0, 0, 255). Aber die Füllung erreicht nie (145, 35), weil ein Pfadfarbverlaufspinsel nur innerhalb seines Pfads zeichnet.