Procedimiento para crear un degradado lineal

GDI+ proporciona degradados lineales horizontales, verticales y diagonales. De manera predeterminada, el color de un degradado lineal cambia uniformemente. Pero puede personalizar un degradado lineal para que el color cambie de forma no uniforme.

En el ejemplo siguiente se rellena una línea, una elipse y un rectángulo con un pincel de degradado lineal horizontal.

El constructor LinearGradientBrush recibe cuatro argumentos: dos puntos y dos colores. El primer punto (0, 10) está asociado al primer color (rojo) y el segundo punto (200, 10) está asociado al segundo color (azul). Como cabría esperar, la línea dibujada de (0, 10) a (200, 10) cambia gradualmente de rojo a azul.

Los números 10 de los puntos (0, 10) y (200, 10) no son importantes. Lo que es importante es que los dos puntos tienen la misma segunda coordenada: la línea que los conecta es horizontal. La elipse y el rectángulo también cambian gradualmente de rojo a azul, ya que la coordenada horizontal va de 0 a 200.

En la imagen siguiente se muestran la línea, la elipse y el rectángulo. Tenga en cuenta que el degradado de color se repite a medida que la coordenada horizontal aumenta más allá de 200.

Una línea, una elipse y un rectángulo rellenos con un degradado de color.

Uso de degradados lineales horizontales

• Pase el rojo opaco y el azul opaco como tercer y cuarto argumento, 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)
  
  

En el ejemplo anterior, los componentes de color cambian linealmente a medida que se mueve de una coordenada horizontal de 0 a una de 200. Por ejemplo, un punto cuya primera coordenada está a la mitad entre 0 y 200 tendrá un componente azul que está a mitad camino entre 0 y 255.

GDI+ permite ajustar la forma en que un color varía de un borde de un degradado al otro. Supongamos que quiere crear un pincel de degradado que cambie de negro a rojo según la tabla siguiente.

Tenga en cuenta que el componente rojo está a una intensidad media cuando la coordenada horizontal es solo el 20 por ciento del rango que va de 0 a 200.

En el ejemplo siguiente se establece la propiedad LinearGradientBrush.Blend para asociar tres intensidades relativas a tres posiciones relativas. Al igual que en la tabla anterior, una intensidad relativa de 0,5 está asociada a una posición relativa de 0,2. El código rellena una elipse y un rectángulo con el pincel de degradado.

En la imagen siguiente se muestra la elipse y el rectángulo resultantes.

Una elipse y un rectángulo rellenados con un degradado de color horizontal.

Personalización de degradados lineales

• Pase el negro opaco y el rojo opaco como tercer y cuarto argumento, 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)
  
  

Los degradados de los ejemplos anteriores han sido horizontales; es decir, el color cambia gradualmente a medida que se mueve a lo largo de cualquier línea horizontal. También puede definir degradados verticales y diagonales.

En el ejemplo siguiente se pasan los puntos (0, 0) y (200, 100) a un constructor LinearGradientBrush. El color azul está asociado a (0, 0) y el verde está asociado a (200, 100). Con el pincel de degradado lineal se rellenan una línea (con ancho de lápiz 10) y una elipse.

En la imagen siguiente se muestran la línea y la elipse. Tenga en cuenta que el color de la elipse cambia gradualmente a medida que se mueve a lo largo de cualquier línea paralela a la línea que pasa por (0, 0) y (200, 100).

Una línea y una elipse rellenadas con un degradado de color diagonal.

Creación de degradados lineales diagonales

• Pase el azul opaco y el verde opaco como tercer y cuarto argumento, 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)
  
  

Consulte también

• Utilizar un pincel degradado para rellenar formas
• Gráficos y dibujos en Windows Forms