Como: Criar um gradiente de caminho

  • Artigo

The PathGradientBrush classe permite que você personalize a forma de preencher uma forma alterando as cores gradualmente. Por exemplo, você pode especificar uma cor para o centralizar de um caminho e outra cor para o limite de um caminho.Você também pode especificar as cores separadas para cada um dos vários pontos ao longo do limite de um caminho.

Observação:

Em GDI+, um caminho é uma sequência de linhas e curvas mantidas por um GraphicsPath objeto. Para obter mais informações sobre o GDI+ caminhos, consulte Caminhos de elementos gráficos no GDI + e Caminhos Construindo e desenho.

Para preencher uma elipse com um gradiente de caminho

  • O exemplo seguinte preenche uma elipse com um pincel de gradiente de caminho.A cor do centralizar é conjunto para azul e o limite de cor é conjunto para azul-piscina.A ilustração a seguir mostra a elipse preenchida.

Por padrão, um pincel de gradiente de caminho não estende fora do limite do caminho.Se você usar o pincel de gradiente de caminho para preencher uma figura que se estende além do limite do caminho, a área da tela fora do caminho não será preenchida.

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

Para especificar os pontos no limite

  • O exemplo seguinte constrói um pincel de gradiente de caminho de um caminho em forma de estrela.O código define o CenterColor propriedade, que define a cor em centróides da estrela para vermelho. Em seguida o código define o SurroundColors propriedade para especificar várias cores (armazenado na colors Array) no pontos individuais das points matriz. demonstrativo do código final preenche o caminho com o pincel de gradiente de caminho em forma de estrela.

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

  • O exemplo a seguir desenha um gradiente de caminho sem um GraphicsPath objeto no código. O específicoPathGradientBrush construtor no exemplo recebe uma matriz de pontos, mas não requer um GraphicsPath objeto. Além disso, observe que o PathGradientBrush é usado para preencher um retângulo, não um caminho. O retângulo é maior do que o caminho fechado usado para definir o pincel, para que alguns do retângulo não é pintado pelo pincel.A ilustração a seguir mostra a parte do retângulo pintado pelo Pincel de gradiente de caminho e o retângulo (linha pontilhada).

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

Para personalizar um gradiente de caminho

  • Uma maneira de personalizar um pincel de gradiente de caminho é conjunto sua FocusScales propriedade. Dimensiona a foco especificar um caminho interno que se encontra dentro do caminho principal.A cor do centralizar é exibida em qualquer lugar dentro desse caminho interno em vez de apenas no ponto central.

    O exemplo a seguir cria um pincel de gradiente de caminho com base em um caminho elíptico.O código define como azul a cor do limite, define a cor do centralizar para azul claro e, em seguida, usa o pincel de gradiente de caminho para preencher o caminho elíptico.

    Em seguida, o código define o pode ser expandido de foco do pincel de gradiente de caminho.Escala x foco é definida como 0,3 e a escala de foco de y é definida como 0,8.O código chama o TranslateTransform método de um Graphics objeto para que a telefonar subseqüente para FillPath preenche uma elipse que fica à direita da primeira elipse.

    Para ver o efeito de escalas de foco, imagine uma elipse pequena compartilha seu centralizar com elipse principal.Pequena elipse (interna) é dimensionada horizontalmente (cerca de seu centralizar) por um fator de 0,3 e verticalmente por um fator de 0,8 principal elipse.sistema autônomo Mover do limite da elipse externo para o limite da elipse interno, a cor gradualmente muda de azul para azul-piscina.Quando você vai do limite da elipse interno para o centralizar compartilhado, o permanece cor água.

    A ilustração a seguir mostra a saída de código a seguir.Uma elipse à esquerda é azul claro só o centralizar ponto.Uma elipse à direita é azul claro em qualquer lugar dentro do caminho interno.

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

Para personalizar com interpolação

  • Outra maneira de personalizar um pincel de gradiente de caminho é especificar uma matriz de cores de interpolação e uma matriz de posições de interpolação.

    O exemplo a seguir cria um pincel de gradiente de caminho com base em um triângulo.O código define o InterpolationColors propriedade do pincel de gradiente de caminho para especificar uma matriz de cores de interpolação (verde escuro, azul-piscina, azul) e uma matriz de posições de interpolação (0, 0,25, 1). Quando você vai do limite do triângulo sistema autônomo o ponto central, a cor é alterada gradualmente de verde-escuro para azul claro e depois do azul claro para azul.A alterar de verde-escuro azul-piscina acontece em 25 por cento em relação a distância de verde-escuro para azul.

    A ilustração a seguir mostra o triângulo preenchido com o pincel de gradiente de caminho personalizado.

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

Para conjunto o centralizar ponto

  • Por padrão, o centralizar ponto de um pincel de gradiente de caminho está no centróides do caminho usado para construir o pincel.Você pode alterar o local do centralizar ponto, definindo o CenterPoint propriedade das PathGradientBrush classe.

    O exemplo a seguir cria um pincel de gradiente de caminho com base em uma elipse.O centralizar da elipse é em (70, 35), mas o ponto central do pincel em dégradé caminho está definido como (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);

A ilustração a seguir mostra a elipse preenchida e o centralizar ponto do pincel de gradiente de caminho.

  • Você pode conjunto o ponto central de um pincel de gradiente de caminho para um local fora do caminho que foi usado para construir o pincel.O exemplo a seguir substitui a telefonar para conjunto o CenterPoint propriedade no código anterior.

    pthGrBrush.CenterPoint = New PointF(145, 35)

    pthGrBrush.CenterPoint = new PointF(145, 35);

    A ilustração a seguir mostra a saída com esta alterar.

Na ilustração anterior, os pontos na extremidade direita da elipse não são azul puro (apesar de elas estarem muito perto).sistema autônomo cores em gradiente são posicionadas sistema autônomo se o preenchimento atingido o ponto (145, 35) no local em que a cor será azul puro (0, 0, 255).Mas nunca atinge o preenchimento (145, 35) porque um pincel de gradiente de caminho pinta apenas dentro de seu caminho.

Consulte também

Outros recursos

Usando um pincel de gradiente para preencher formas