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

Статья
11/05/2008

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

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

Примечание.
В интерфейсе GDI+ контур представляет собой последовательность линий и кривых, поддерживаемых объектом GraphicsPath. Дополнительные сведения о контурах GDI+ см. в разделах Контуры в GDI+ и Построение и рисование контуров.

Заливка эллипса с использованием градиента контура

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

Градиент контура

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

Градиент контура

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

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

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

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

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

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

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

Градиент

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

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

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

Одним из способов настройки кисти градиента контура является установка ее свойства FocusScales. Это свойство определяет внутренний контур, лежащий внутри основного контура. Цвет центра используется везде в пределах этого внутреннего контура, а не только в центральной точке.

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

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

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

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

Градиент

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

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

Настройка с интерполяцией

Другим способом настройки кисти градиента контура является указание массива цветов интерполяции и массива положений интерполяции.

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

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

Градиент контура

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

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

Задание центральной точки

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

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

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

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

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

Градиент контура

В качестве центральной точки кисти градиента контура можно установить точку, которая лежит вне контура, который использовался для создания кисти. В следующем примере показан код, заменяющий участок предыдущего кода, в котором устанавливается свойство CenterPoint.
```
pthGrBrush.CenterPoint = New PointF(145, 35)
```
```
pthGrBrush.CenterPoint = new PointF(145, 35);
```
На следующем рисунке представлен результат выполнения кода, измененного указанным образом.

Градиент контура

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

См. также

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

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

Поделиться через

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

Заливка эллипса с использованием градиента контура

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

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

Настройка с интерполяцией

Задание центральной точки

См. также

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

Дополнительные ресурсы