Creación de 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.

• Degradados lineales horizontales
• Personalización de degradados lineales
• Degradados lineales diagonales

Degradados lineales horizontales

En el ejemplo siguiente se usa un pincel de degradado lineal horizontal para rellenar una línea, una elipse y un rectángulo:

LinearGradientBrush linGrBrush(
   Point(0, 10),
   Point(200, 10),
   Color(255, 255, 0, 0),   // opaque red
   Color(255, 0, 0, 255));  // opaque blue

Pen pen(&linGrBrush);

graphics.DrawLine(&pen, 0, 10, 200, 10);
graphics.FillEllipse(&linGrBrush, 0, 30, 200, 100);
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). 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 (50, 10) y (200, 10) no son importantes. 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, 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.

Personalización de degradados lineales

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 llama al método LinearGradientBrush::SetBlend de un objeto LinearGradientBrush para asociar tres densidades relativas con 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.

LinearGradientBrush linGrBrush(
   Point(0, 10),
   Point(200, 10),
   Color(255, 0, 0, 0),     // opaque black 
   Color(255, 255, 0, 0));  // opaque red

REAL relativeIntensities[] = {0.0f, 0.5f, 1.0f};
REAL relativePositions[]   = {0.0f, 0.2f, 1.0f};

linGrBrush.SetBlend(relativeIntensities, relativePositions, 3);

graphics.FillEllipse(&linGrBrush, 0, 30, 200, 100);
graphics.FillRectangle(&linGrBrush, 0, 155, 500, 30);

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

Degradados lineales diagonales

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. El código siguiente pasa 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.

LinearGradientBrush linGrBrush(
   Point(0, 0),
   Point(200, 100),
   Color(255, 0, 0, 255),   // opaque blue
   Color(255, 0, 255, 0));  // opaque green

Pen pen(&linGrBrush, 10);

graphics.DrawLine(&pen, 0, 0, 600, 300);
graphics.FillEllipse(&linGrBrush, 10, 100, 200, 100);

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).