Como Criar um Gradiente Linear

O GDI+ fornece gradientes lineares horizontais, verticais e diagonais. Por padrão, a cor em um gradiente linear muda uniformemente. No entanto, você pode personalizar um gradiente linear para que a cor mude de maneira não uniforme.

Observação

Os exemplos neste artigo são métodos que são chamados a partir do manipulador de eventos de Paint um controle.

O exemplo a seguir preenche uma linha, uma elipse e um retângulo com um pincel de gradiente linear horizontal.

O LinearGradientBrush construtor recebe quatro argumentos: dois pontos e duas cores. O primeiro ponto (0, 10) é associado à primeira cor (vermelho) e o segundo ponto (200, 10) é associado à segunda cor (azul). Como seria de esperar, a linha desenhada de (10, 0) a (200, 10) muda gradualmente de vermelho para azul.

Os 10s nos pontos (0, 10) e (200, 10) não são importantes. O que é importante é que os dois pontos têm a mesma segunda coordenada: a linha que os conecta é horizontal. A elipse e o retângulo também mudam gradualmente de vermelho para azul conforme a coordenada horizontal vai de 0 a 200.

A ilustração a seguir mostra a linha, a elipse e o retângulo. Observe que o gradiente de cores repete-se à medida que a coordenada horizontal aumenta além de 200.

Para usar gradientes lineares horizontais

• Passe o vermelho opaco e o azul opaco como o terceiro e o quarto argumentos, respectivamente.

  public void UseHorizontalLinearGradients(PaintEventArgs e)
  {
      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);
  }
  

  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)
  
  

No exemplo anterior, os componentes de cor mudam linearmente conforme você vai de uma coordenada horizontal de 0 para uma coordenada horizontal de 200. Por exemplo, um ponto cuja primeira coordenada esteja a meio caminho entre 0 e 200 terá um componente azul a meio caminho entre 0 e 255.

O GDI+ permite ajustar a maneira como uma cor varia de uma borda de um gradiente para a outra. Suponha que você queira criar um pincel de gradiente que mude de preto para vermelho de acordo com a tabela a seguir.

Coordenada horizontal	Componentes RGB
0	(0, 0, 0)
40	(128, 0, 0)
200	(255, 0, 0)

Observe que o componente vermelho está na metade da intensidade quando a coordenada horizontal está a apenas 20% do caminho de 0 a 200.

O exemplo a seguir define a propriedade para associar três intensidades relativas a LinearGradientBrush.Blend três posições relativas. Como na tabela anterior, uma intensidade relativa de 0,5 é associada a uma posição relativa de 0,2. O código preenche uma elipse e um retângulo com o pincel de gradiente.

A ilustração a seguir mostra o retângulo e elipse resultantes.

Para personalizar os gradientes lineares

• Passe o preto opaco e o vermelho opaco como o terceiro e o quarto argumentos, respectivamente.

  public void CustomizeLinearGradients(PaintEventArgs e)
  {
      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);
  }
  

  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)
  
  

Os gradientes nos exemplos anteriores eram horizontais; ou seja, a cor muda gradualmente à medida que você se move ao longo de qualquer linha horizontal. Você também pode definir gradientes verticais e gradientes diagonais.

O exemplo a seguir passa os pontos (0, 0) e (200, 100) para um LinearGradientBrush construtor. A cor azul é associada a (0, 0) e a cor verde é associada a (200, 100). Uma linha (com largura da caneta de 10) e uma elipse são preenchidas com o pincel de gradiente linear.

A ilustração a seguir mostra a linha e a elipse. Observe que a cor na elipse muda gradualmente à medida que você se move ao longo de qualquer linha paralela à linha que passa por (0, 0) e (200, 100).

Para criar gradientes lineares diagonais

• Passe o azul opaco e o verde opaco como o terceiro e o quarto argumentos, respectivamente.

  public void CreateDiagonalLinearGradients(PaintEventArgs e)
  {
      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);
  }
  

  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)
  
  

Confira também

• Usando um Pincel de Gradiente para Preencher Formas
• Elementos Gráficos e Desenho nos Windows Forms