Vorgehensweise: Erstellen eines Pfad-Gradients

Mit der PathGradientBrush Klasse können Sie die Art und Weise anpassen, wie Sie eine Form mit allmählich ändernden Farben füllen. Sie können z. B. 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 von mehreren Punkten entlang der Grenze eines Pfads angeben.

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

So füllen Sie eine Ellipse mit einem Pfadverlauf

• Im folgenden Beispiel wird eine Ellipse mit einem Pfadverlaufpinsel gefüllt. Die Mittelfarbe wird auf Blau festgelegt, und die Begrenzungsfarbe wird auf Aqua festgelegt. Die folgende Abbildung zeigt die gefüllte Ellipse.

  

  Standardmäßig wird ein Pfadverlaufspinsel nicht außerhalb der Grenze des Pfads erweitert. Wenn Sie den Pfadverlaufpinsel verwenden, um eine Figur zu füllen, die sich über die Grenze des Pfads erstreckt, wird der Bereich des Bildschirms außerhalb des Pfads nicht ausgefüllt.

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

  

  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 wurde für die Verwendung mit Windows Forms entwickelt und erfordert die PaintEventArgs e, die ein Parameter von PaintEventHandlerist.

So geben Sie Punkte an der Grenze an

• Im folgenden Beispiel wird ein Pfadverlaufspinsel aus einem sternförmigen Pfad erstellt. Der Code legt die CenterColor Eigenschaft fest, die die Farbe am Zentrum des Sterns auf Rot festlegt. Anschließend legt der Code die SurroundColors Eigenschaft so fest, dass an den einzelnen Punkten des colors Arrays verschiedene Farben (im points Array gespeichert) angegeben werden. Die endgültige Code-Anweisung füllt den sternförmigen Pfad mit dem Pfadverlaufpinsel.

  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)
  

• Im folgenden Beispiel wird ein Pfadverlauf ohne ein GraphicsPath Objekt im Code erstellt. Der bestimmte PathGradientBrush Konstruktor im Beispiel empfängt ein Array von Punkten, er benötigt jedoch kein GraphicsPath Objekt. Beachten Sie außerdem, dass das PathGradientBrush verwendet wird, um ein Rechteck und nicht einen Pfad auszufüllen. Das Rechteck ist größer als der geschlossene Pfad, der zum Definieren 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 vom Pfadverlaufpinsel gezeichnet wurde:

  

  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 Pfadgradientenpinsels besteht darin, seine Eigenschaft FocusScales festzulegen. Die Fokusskalierung gibt einen inneren Pfad an, der sich innerhalb des Hauptpfads befindet. Die Mittelfarbe wird überall innerhalb dieses inneren Pfads und nicht nur am Mittelpunkt angezeigt.

  Im folgenden Beispiel wird ein Pfadverlaufspinsel basierend auf einem elliptischen Pfad erstellt. Der Code legt die Begrenzungsfarbe auf Blau fest, legt die Mittelfarbe auf Aqua fest und verwendet dann den Pfadverlaufspinsel, um den elliptischen Pfad auszufüllen.

  Als Nächstes legt der Code die Fokus-Skalen des Pfadgradientpinsels fest. Die x-Fokusskalierung ist auf 0,3 festgelegt, und die y-Fokusskalierung wird auf 0,8 festgelegt. Der Code ruft die TranslateTransform Methode eines Graphics Objekts auf, sodass der nachfolgende Aufruf FillPath eine Ellipse ausfüllt, die sich rechts neben der ersten Ellipse befindet.

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

  Die folgende Abbildung zeigt die Ausgabe des folgenden Codes. Die Ellipse links ist aqua nur am Mittelpunkt. Die Auslassungspunkte auf der rechten Seite sind überall im inneren Pfad Aqua.

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 passen Sie die Interpolation an

• Eine weitere Möglichkeit zum Anpassen eines Pfadverlaufpinsels besteht darin, ein Array von Interpolationsfarben und ein Array von Interpolationspositionen anzugeben.

  Im folgenden Beispiel wird ein Pfadverlaufspinsel basierend auf einem Dreieck erstellt. Der Code legt die InterpolationColors Eigenschaft des Pfadverlaufpinsels fest, um ein Array von Interpolationsfarben (Dunkelgrün, Aqua, Blau) und ein Array von Interpolationspositionen (0, 0,25, 1) anzugeben. Während Sie von der Grenze des Dreiecks zum Mittelpunkt wechseln, ändert sich die Farbe allmählich von Dunkelgrün zu Aqua und dann von Aqua zu Blau. Der Wechsel von Dunkelgrün zu Aqua erfolgt in 25 Prozent des Abstands von Dunkelgrün zu Blau.

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

  

  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 Pfadverlaufspinsels am Mittelpunkt des Pfads, 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 Pfadverlaufspinsel basierend auf einer Ellipse erstellt. Die Mitte der Ellipse liegt bei (70, 35), der Mittelpunkt des Pfadverlaufspinsels ist jedoch 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üllten Auslassungspunkte und den Mittelpunkt des Pfadverlaufspinsels:

  

• Sie können den Mittelpunkt eines Pfadverlaufspinsels auf eine Position außerhalb des Pfads festlegen, der zum Erstellen des Pinsels verwendet wurde. Im folgenden Beispiel wird der Aufruf zum Festlegen der CenterPoint Eigenschaft im vorherigen Code ersetzt.

  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 mit dieser Änderung:

  

  In der vorstehenden Abbildung sind die Punkte ganz rechts der Ellipse nicht rein blau (obwohl sie sehr nahe sind). Die Farben im Farbverlauf werden so positioniert, als ob die Füllung den Punkt (145, 35) erreicht, an dem die Farbe reinblau (0, 0, 255) wäre. Die Füllung erreicht jedoch nie (145, 35), da ein Pfadverlaufspinsel nur innerhalb seines Pfads zeichnet.

Code kompilieren

Die vorstehenden Beispiele sind für die Verwendung mit Windows Forms konzipiert und erfordern PaintEventArgseeinen Parameter des Paint Ereignishandlers.

Siehe auch

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