Cómo: Crear un degradado lineal
Actualización: noviembre 2007
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.
En el siguiente ejemplo se rellenan una línea, una elipse y un rectángulo con un pincel 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). 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)
Para utilizar degradados lineales horizontales
Pase el rojo opaco y el azul opaco como el tercer y el cuarto argumentos, respectivamente.
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)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);
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 un 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.
En la siguiente ilustración se muestran la elipse y el rectángulo resultantes.
.png)
Para personalizar degradados lineales
Pase el negro opaco y el rojo opaco como el tercer y el cuarto argumentos, respectivamente.
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)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);
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.
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)
Para crear degradados lineales diagonales
Pase el azul opaco y el verde opaco como el tercer y el cuarto argumentos, respectivamente.
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)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);