Crear un degradado lineal
GDI+ proporciona degradados lineales horizontales, verticales y diagonales. De manera predeterminada, el color de un degradado lineal cambia de manera uniforme. Sin embargo, los degradados lineales se pueden personalizar para que el color cambie de manera no uniforme.
Degradados lineales horizontales
En el siguiente ejemplo se rellenan una línea, una elipse y un rectángulo con un pincel degradado lineal horizontal:
' Pass in the opaque red and opaque blue as the third and fourth argument,
' respectively.
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)
[C#]
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);
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). Tal como se espera, la línea que se dibuja de (0, 10) a (200, 10) cambia gradualmente de rojo a azul.
Las decenas en los puntos (50, 10) y (200, 10) no tienen importancia. Lo importante es que los dos puntos tengan 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 al pasar la coordenada horizontal de 0 a 200.
En la siguiente ilustración se muestran la línea, la elipse y el rectángulo. Observe que el degradado de color se repite cuando la coordenada horizontal aumenta por encima de 200.
.png)
Personalizar degradados lineales
En el ejemplo anterior, los componentes de color cambian linealmente al desplazarnos 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 estará a mitad de camino entre 0 y 255.
GDI+ permite ajustar la manera en que cambia el color desde un extremo del degradado al otro. Supongamos que se desea crear un pincel degradado que cambia 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) |
Observe que el componente rojo tiene la mitad de la intensidad cuando la coordenada horizontal es tan sólo un 20 por ciento del recorrido de 0 a 200.
En el ejemplo siguiente se establece la propiedad Blend de un objeto LinearGradientBrush para asociar tres intensidades relativas a tres posiciones relativas. Como 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 degradado.
' Pass in the opaque black and opaque red as the third and fourth argument,
' respectively.
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() = {0F, 0.5F, 1F}
Dim relativePositions As Single() = {0F, 0.2F, 1F}
'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)
[C#]
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);
En la siguiente ilustración se muestran la elipse y el rectángulo resultantes.
.png)
Degradados lineales diagonales
Los degradados de los ejemplos anteriores son horizontales; es decir, el color cambia gradualmente al desplazarnos por cualquier línea horizontal. También se pueden 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 color verde a (200, 100). Con el pincel degradado lineal se rellenan una línea (con ancho de lápiz 10) y una elipse.
' Pass in the opaque blue and opaque green as the third and fourth
' argument, respectively.
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)
[C#]
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);
En la siguiente ilustración se muestran la línea y la elipse. Observe que el color de la elipse cambia gradualmente al desplazarse por cualquier línea paralela a la línea que pasa por los puntos (0, 0) y (200, 100).
.png)