Практическое руководство. Создание линейного градиента

GDI+ позволяет создавать горизонтальные, вертикальные и диагональные линейные градиенты. По умолчанию цвет в линейном градиенте изменяется равномерно. Однако можно настроить линейный градиент таким образом, чтобы цвет меняется неоднородно.

Примечание.

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

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

Конструктор LinearGradientBrush получает четыре аргумента: две точки и два цвета. Первая точка (0, 10) связана с первым цветом (красным), а со второй точкой (200, 10) связан второй цвет (синий). Как можно догадаться, линия, нарисованная от (0, 10) до (200, 10), постепенно меняется с красного на синий.

Сами значения «10» в точках (0, 10) и (200, 10) не так важны. Важно то, что две точки имеют одну и ту же вторую координату — они, таким образом, соединены горизонтальной линией. Эллипс и прямоугольник также постепенно меняют цвет с красного на синий в процессе перехода по горизонтальной координате от 0 до 200.

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

Использование горизонтального линейного градиента

• Задайте непрозрачный красный и синий цвета в качестве третьего и четвертого аргумента соответственно.

  public void UseHorizontalLinearGradients(PaintEventArgs e)
  {
      LinearGradientBrush linGrBrush = new LinearGradientBrush(
         new Point(0, 10),
         new Point(200, 10),
         Color.FromArgb(255, 255, 0, 0),   // Opaque red
         Color.FromArgb(255, 0, 0, 255));  // Opaque blue
  
      Pen pen = new Pen(linGrBrush);
  
      e.Graphics.DrawLine(pen, 0, 10, 200, 10);
      e.Graphics.FillEllipse(linGrBrush, 0, 30, 200, 100);
      e.Graphics.FillRectangle(linGrBrush, 0, 155, 500, 30);
  }
  

  Dim linGrBrush As New LinearGradientBrush( _
     New Point(0, 10), _
     New Point(200, 10), _
     Color.FromArgb(255, 255, 0, 0), _
     Color.FromArgb(255, 0, 0, 255))
  Dim pen As New Pen(linGrBrush)
  
  e.Graphics.DrawLine(pen, 0, 10, 200, 10)
  e.Graphics.FillEllipse(linGrBrush, 0, 30, 200, 100)
  e.Graphics.FillRectangle(linGrBrush, 0, 155, 500, 30)
  
  

В предыдущем примере компоненты цвета изменяются линейно при движении с горизонтальной координаты 0 на горизонтальную координату 200. Например, точка, первая координата которой находится на полпути между 0 и 200, будет иметь синий компонент со значением на полпути от 0 до 255.

GDI+ позволяет настроить способ изменения цвета от одного края градиента к другому. Предположим, что вы хотите создать кисть градиента, цвет которой изменяется с черного на красный в соответствии со следующей таблицей.

Горизонтальная координата	Компоненты RGB
0	(0, 0, 0)
40	(128, 0, 0)
200	(255, 0, 0)

Обратите внимание, что показатель интенсивности красного компонента уменьшился наполовину, в то время как горизонтальная координата составляет всего 20 процентов пути от 0 до 200.

В следующем примере свойство LinearGradientBrush.Blend задается для связывания трех относительных интенсивностей с тремя относительными позициями. Как показано в предыдущей таблице, относительная интенсивность 0,5 связана с относительной позицией 0,2. Код заполняет эллипс и прямоугольник кистью градиента.

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

Настройка линейных градиентов

• Задайте непрозрачный черный и красный цвета в качестве третьего и четвертого аргумента соответственно.

  public void CustomizeLinearGradients(PaintEventArgs e)
  {
      LinearGradientBrush linGrBrush = new LinearGradientBrush(
         new Point(0, 10),
         new Point(200, 10),
         Color.FromArgb(255, 0, 0, 0),     // Opaque black
         Color.FromArgb(255, 255, 0, 0));  // Opaque red
  
      float[] relativeIntensities = { 0.0f, 0.5f, 1.0f };
      float[] relativePositions = { 0.0f, 0.2f, 1.0f };
  
      //Create a Blend object and assign it to linGrBrush.
      Blend blend = new Blend();
      blend.Factors = relativeIntensities;
      blend.Positions = relativePositions;
      linGrBrush.Blend = blend;
  
      e.Graphics.FillEllipse(linGrBrush, 0, 30, 200, 100);
      e.Graphics.FillRectangle(linGrBrush, 0, 155, 500, 30);
  }
  

  Dim linGrBrush As New LinearGradientBrush( _
     New Point(0, 10), _
     New Point(200, 10), _
     Color.FromArgb(255, 0, 0, 0), _
     Color.FromArgb(255, 255, 0, 0))
  
  Dim relativeIntensities As Single() = {0.0F, 0.5F, 1.0F}
  Dim relativePositions As Single() = {0.0F, 0.2F, 1.0F}
  
  'Create a Blend object and assign it to linGrBrush.
  Dim blend As New Blend()
  blend.Factors = relativeIntensities
  blend.Positions = relativePositions
  linGrBrush.Blend = blend
  
  e.Graphics.FillEllipse(linGrBrush, 0, 30, 200, 100)
  e.Graphics.FillRectangle(linGrBrush, 0, 155, 500, 30)
  
  

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

В следующем примере точки (0, 0) и (200, 100) передаются в конструктор LinearGradientBrush. Синий цвет связан с точкой (0, 0), а цвет зеленый — с (200, 100). Линия (с шириной пера 10) и эллипс заполняются линейной кистью градиента.

На следующем рисунке показаны линия и эллипс. Обратите внимание, что цвет эллипса изменяется постепенно по мере перемещения по любой линии, параллельной линии, проходящей через (0, 0) и (200, 100).

Создание диагональных линейных градиентов

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

  public void CreateDiagonalLinearGradients(PaintEventArgs e)
  {
      LinearGradientBrush linGrBrush = new LinearGradientBrush(
         new Point(0, 0),
         new Point(200, 100),
         Color.FromArgb(255, 0, 0, 255),   // opaque blue
         Color.FromArgb(255, 0, 255, 0));  // opaque green
  
      Pen pen = new Pen(linGrBrush, 10);
  
      e.Graphics.DrawLine(pen, 0, 0, 600, 300);
      e.Graphics.FillEllipse(linGrBrush, 10, 100, 200, 100);
  }
  

  Dim linGrBrush As New LinearGradientBrush( _
     New Point(0, 0), _
     New Point(200, 100), _
     Color.FromArgb(255, 0, 0, 255), _
     Color.FromArgb(255, 0, 255, 0))
  ' opaque blue
  ' opaque green
  Dim pen As New Pen(linGrBrush, 10)
  
  e.Graphics.DrawLine(pen, 0, 0, 600, 300)
  e.Graphics.FillEllipse(linGrBrush, 10, 100, 200, 100)
  
  

См. также

• Заливка фигур с помощью градиентной кисти
• Объекты Graphics и Drawing в Windows Forms