Создание линейного градиента

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

• Горизонтальные линейные градиенты
• Настройка линейных градиентов
• Линейные градиенты по диагонали

Горизонтальные линейные градиенты

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

LinearGradientBrush linGrBrush(
   Point(0, 10),
   Point(200, 10),
   Color(255, 255, 0, 0),   // opaque red
   Color(255, 0, 0, 255));  // opaque blue

Pen pen(&linGrBrush);

graphics.DrawLine(&pen, 0, 10, 200, 10);
graphics.FillEllipse(&linGrBrush, 0, 30, 200, 100);
graphics.FillRectangle(&linGrBrush, 0, 155, 500, 30);

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

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

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

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

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

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

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

 

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

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

LinearGradientBrush linGrBrush(
   Point(0, 10),
   Point(200, 10),
   Color(255, 0, 0, 0),     // opaque black 
   Color(255, 255, 0, 0));  // opaque red

REAL relativeIntensities[] = {0.0f, 0.5f, 1.0f};
REAL relativePositions[]   = {0.0f, 0.2f, 1.0f};

linGrBrush.SetBlend(relativeIntensities, relativePositions, 3);

graphics.FillEllipse(&linGrBrush, 0, 30, 200, 100);
graphics.FillRectangle(&linGrBrush, 0, 155, 500, 30);

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

Линейные градиенты по диагонали

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

LinearGradientBrush linGrBrush(
   Point(0, 0),
   Point(200, 100),
   Color(255, 0, 0, 255),   // opaque blue
   Color(255, 0, 255, 0));  // opaque green

Pen pen(&linGrBrush, 10);

graphics.DrawLine(&pen, 0, 0, 600, 300);
graphics.FillEllipse(&linGrBrush, 10, 100, 200, 100);

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