Compartir a través de

Procedimiento para crear un degradado lineal

  • Artículo

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.

Nota

Los ejemplos de este artículo son métodos a los que se llama desde el controlador de eventos Paint de un control.

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.

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

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