Как создать градиент по пути

Класс PathGradientBrush позволяет выбрать способ заполнения фигуры постепенно сменяющимися цветами. Например, можно указать один цвет для центра пути, а другой — для его границы. Можно также указать отдельные цвета для нескольких выбранных точек вдоль границы пути.

Примеры в этой статье — это методы, вызываемые из обработчика событий элемента управления Paint.

Чтобы заполнить эллипс путем-градиентом

• В следующем примере эллипс заполняется градиентной кистью по траектории. Цвет центра имеет синий цвет, а цвет границы имеет значение aqua. На следующем рисунке показан заполненный эллипс.

  

  По умолчанию кисть градиента пути не расширяется за пределами границы пути. Если вы используете кисть градиента пути для заполнения фигуры вне границы пути, область экрана за пределами пути заполнена не будет.

  На следующем рисунке показано, что происходит при изменении вызова Graphics.FillEllipse в следующем коде на e.Graphics.FillRectangle(pthGrBrush, 0, 10, 200, 40):

  

  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)
  
  

  Предыдущий пример кода предназначен для работы с Windows Forms и требует PaintEventArgs, который является параметром PaintEventHandler.

Указание точек на границе

• В следующем примере создается градиентная кисть пути из звездообразного пути. Код задает свойство CenterColor, которое устанавливает красный цвет в центреоиде звезды. Затем код задает свойство SurroundColors, чтобы указать различные цвета (хранящиеся в массиве colors) в отдельных точках массива points. Последняя инструкция кода заполняет путь, сформированный звездочкой, с помощью кисти градиента пути.

  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)
  

• В следующем примере рисуется градиент пути без объекта GraphicsPath в коде. Рассматриваемый в примере конструктор PathGradientBrush получает массив точек, но не требует объекта GraphicsPath. Обратите внимание, что PathGradientBrush используется для заполнения прямоугольника, а не пути. Прямоугольник больше, чем используемый для определения кисти закрытый путь, поэтому некоторые прямоугольники не окрашиваются кистью. На следующем рисунке показаны прямоугольник (обозначен пунктиром) и часть прямоугольника, окрашенная кистью градиента пути:

  

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

Настройка градиента пути

• Одним из способов настройки кисти градиента пути является установка его свойства FocusScales. Масштабы фокуса указывают внутренний путь, лежащий внутри основного пути. Цвет центра отображается везде внутри этого внутреннего пути, а не только в центре.

  В следующем примере создается градиентная кисть для пути, основанная на эллиптическом пути. Код задает цвет границы синий, задает цвет центра в аквамариновый, а затем использует градиентную кисть для пути для заполнения эллиптической фигуры.

  Затем код задает масштаб фокуса кисти градиента пути. Для шкалы фокуса x задано значение 0,3, а для шкалы фокуса y задано значение 0,8. Код вызывает метод TranslateTransform объекта Graphics, чтобы последующий вызов FillPath заполнял эллипс, находящийся справа от первого эллипса.

  Чтобы увидеть эффект масштабирования фокуса, представьте себе небольшой эллипс, который разделяет свой центр с основным эллипсом. Малый (внутренний) эллипс является основным эллипсом, масштабированным относительно его центра: по горизонтали на коэффициент 0,3 и по вертикали на 0,8. При переходе от границы внешнего эллипса к границе внутреннего эллипса цвет изменяется постепенно от синего до аква. При переходе от границы внутреннего многоточия к общему центру цвет остается аква.

  На рисунке ниже показан результат выполнения кода. Эллипс слева является аква только в центральной точке. Эллипс справа - бирюзовый везде внутри внутреннего контура.

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)

Настройка с помощью интерполяции

• Настроить кисть градиента пути также можно через указание массива цветов интерполяции и массива позиций интерполяции.

  В следующем примере создается градиентная кисть для пути на основе треугольника. Код задает свойство InterpolationColors кисти градиента пути, чтобы указать массив цветов интерполяции (темно-зеленый, аквамариновый, синий) и массив позиций интерполяции (0, 0,25, 1). При переходе от границы треугольника к центру цвет изменяется постепенно с темно-зеленого на аква, а затем от аква до синего. Изменение от темно-зеленого к аква происходит в 25 процентов расстояния от темно-зеленого до синего.

  На следующем рисунке показан треугольник, заполненный пользовательской кистью градиента пути.

  

  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)
  
  

Установка центральной точки

• По умолчанию центральная точка градиентной кисти пути находится в центроиде пути, используемом для создания кисти. Расположение центральной точки можно изменить, задав свойство CenterPoint класса PathGradientBrush.

  В следующем примере создается градиентная кисть для контура на основе эллипса. Центр эллипса находится в точке (70, 35), но центральная точка кисти градиента пути расположена в точке (120, 40).

  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)
  

  На следующем рисунке показаны заполненный эллипс и центральная точка кисти градиента пути:

  

• Вы можете задать центральную точку градиентной кисти по пути в место за пределами пути, который использовался для создания кисти. В следующем примере выполняется замена вызова для задания свойства CenterPoint в предыдущем коде.

  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)
  

  На следующем рисунке показан достигнутый этой заменой результат:

  

  На предыдущем рисунке точки в правом углу эллипса не являются чистыми синим (хотя они очень близки). Цвета в градиенте расположены так, как если бы заливка достигла точки (145, 35), где цвет должен быть чисто синим (0, 0, 255). Но заливка никогда не достигает точки (145, 35), потому что градиентная кисть рисует только внутри своего контура.

Компиляция кода

Приведенные выше примеры предназначены для использования с Windows Forms и требуются PaintEventArgse, что является параметром обработчика Paint событий.

См. также

• Использование градиентной кисти для заливки фигур