Compartir a través de

Cómo: Crear un degradado lineal

GDI+ proporciona degradados lineales horizontales, verticales y diagonales. De forma predeterminada, el color de un degradado lineal cambia uniformemente. Sin embargo, 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 de Paint 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 LinearGradientBrush constructor 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 10 en los puntos (0, 10) y (200, 10) no son importantes. Lo que es importante es que los dos puntos tengan la misma coordenada de segundo: la línea que los conecta es horizontal. La elipse y el rectángulo también cambian gradualmente de rojo a azul a medida que la coordenada horizontal va de 0 a 200.

En la ilustración siguiente se muestra 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 lleno de degradado de color.

Para usar degradados lineales horizontales

  • Pase el color 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 coordenada horizontal de 200. Por ejemplo, un punto cuya primera coordenada está a mitad de camino entre 0 y 200 tendrá un componente azul que esté medio 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 desea 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 media intensidad cuando la coordenada horizontal es solo el 20 por ciento del camino de 0 a 200.

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

En la ilustración siguiente se muestra la elipse y el rectángulo resultantes.

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

Para personalizar degradados lineales

  • Pase el color 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 degradados diagonales.

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

En la siguiente ilustración se muestra 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.

Para crear degradados lineales diagonales

  • Pase el color 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