Практическое руководство. Создание линейного градиента
Обновлен: Ноябрь 2007
Интерфейс GDI+ поддерживает горизонтальные, вертикальные и диагональные линейные градиенты. По умолчанию цвет в линейном градиенте меняется однородным образом. Однако можно настроить линейный градиент так, чтобы изменение цвета осуществлялось неоднородным образом.
В следующем примере осуществляется заливка линии, эллипса и прямоугольника с помощью кисти линейного горизонтального градиента.
Конструктор LinearGradientBrush принимает четыре параметра: две точки и два цвета. Первая точка (0, 10) соответствует первому цвету (красному), а вторая точка (200, 10) — второму цвету (синему). Как и следовало ожидать, цвет линии, соединяющей точки (0, 10) и (200, 10), плавно меняется от красного к синему.
Вторые координаты (10) для точек (50, 10) и (200, 10) сами по себе не имеют значения. Важно то, что вторые координаты у точек совпадают и соединяющая эти точки линия является горизонтальной. Цвета эллипса и прямоугольника тоже плавно меняются от красного к синему по мере изменения горизонтальной координаты от 0 до 200.
На следующем рисунке представлены линия, эллипс и прямоугольник. Обратите внимание, что цветовой градиент повторяется заново при увеличении горизонтальной координаты до значений, превышающих 200.
.png "Линейный градиент")
Использование горизонтальных линейных градиентов
Передайте непрозрачный красный и непрозрачный синий цвета в качестве соответственно третьего и четвертого аргументов.
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+ позволяет настраивать способ градиентного изменения цвета при движении от одного края к другому. Предположим, требуется создать градиентную кисть, меняющую цвет от черного к красному согласно следующей таблице.
Горизонтальная координата |
RGB-компоненты |
|---|---|
0 |
(0, 0, 0) |
40 |
(128, 0, 0) |
200 |
(255, 0, 0) |
Обратите внимание, что красный компонент имеет половинную интенсивность, когда горизонтальная координата составляет только 20 процентов пути от 0 до 200.
В следующем примере устанавливается свойство Blend объекта LinearGradientBrush для привязки трех относительных интенсивностей к трем относительным положениям. Как и в предыдущей таблице, относительная интенсивность 0,5 соответствует относительному положению 0,2. Этот код служит для заливки эллипса и прямоугольника красным цветом с градиентом.
Окончательный вид эллипса и прямоугольника после заливки представлен на следующем рисунке.
.png "Линейный градиент")
Настройка линейных градиентов
Передайте непрозрачный черный и непрозрачный красный цвета в качестве соответственно третьего и четвертого аргументов.
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).
.png "Линейный градиент")
Создание диагональных линейных градиентов
Передайте непрозрачный синий и непрозрачный зеленый цвета в качестве соответственно третьего и четвертого аргументов.
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);