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

Обновлен: Ноябрь 2007

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

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

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

Вторые координаты (10) для точек (50, 10) и (200, 10) сами по себе не имеют значения. Важно то, что вторые координаты у точек совпадают и соединяющая эти точки линия является горизонтальной. Цвета эллипса и прямоугольника тоже плавно меняются от красного к синему по мере изменения горизонтальной координаты от 0 до 200.

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

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

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

  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)
  
  

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

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

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

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

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

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

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

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

  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)
  
  

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

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

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

На следующем рисунке представлены линия и эллипс. Следует обратить внимание на то, что цвет эллипса плавно меняется вдоль любой линии, параллельной прямой, проходящей через точки (0, 0) и (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)
  
  

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

См. также

Другие ресурсы

Заливка фигур с помощью градиентной кисти

Объекты Graphics и Drawing в Windows Forms