Crear un degradado de trazado

Artículo
04/11/2008

La clase PathGradientBrush permite personalizar el modo de rellenar una forma con colores que cambian gradualmente. Por ejemplo, se puede especificar un color para el centro de un trazado y otro para el límite del mismo. También se pueden especificar colores distintos para cada uno de varios puntos situados en el límite de un trazado.

Nota En GDI+, un trazado es una secuencia de líneas y curvas que tiene un objeto GraphicsPath. Para obtener más información sobre los trazados de GDI+, vea Trazados y Construir y dibujar trazados.

En el siguiente ejemplo se rellena una elipse con un pincel degradado de trazado: El color central se establece en azul y el color del límite se establece en aguamarina.

' Create a path that consists of a single ellipse.
Dim path As New GraphicsPath()
path.AddEllipse(0, 0, 140, 70)

' Use the path to construct a brush.
Dim pthGrBrush As New PathGradientBrush(path)

' Set the color at the center of the path to blue.
pthGrBrush.CenterColor = Color.FromArgb(255, 0, 0, 255)
      
' Set the color along the entire boundary 
' of the path to aqua.
Dim colors As Color() = {Color.FromArgb(255, 0, 255, 255)}
pthGrBrush.SurroundColors = colors

e.Graphics.FillEllipse(pthGrBrush, 0, 0, 140, 70)
[C#]
// Create a path that consists of a single ellipse.
GraphicsPath path = new GraphicsPath();
path.AddEllipse(0, 0, 140, 70);

// Use the path to construct a brush.
PathGradientBrush pthGrBrush = new PathGradientBrush(path);

// Set the color at the center of the path to blue.
pthGrBrush.CenterColor = Color.FromArgb(255, 0, 0, 255);

// Set the color along the entire boundary 
// of the path to aqua.
Color[] colors = {Color.FromArgb(255, 0, 255, 255)};
pthGrBrush.SurroundColors = colors;

e.Graphics.FillEllipse(pthGrBrush, 0, 0, 140, 70);

En la siguiente ilustración se muestra la elipse rellena.

De manera predeterminada, un pincel degradado de trazado no se extiende más allá del límite del trazado. Si se usa el pincel degradado de trazado para rellenar una figura que se extiende más allá del límite del trazado, no se rellenará el área de la pantalla fuera del trazado.

En la siguiente ilustración se muestra lo que sucede si se cambia la llamada a FillEllipse del código anterior a e.Graphics.FillRectangle(pthGrBrush, 0, 10, 200, 40).

Especificar puntos del límite

En el ejemplo siguiente se construye un pincel degradado de trazado a partir de un trazado en forma de estrella. El código establece la propiedad CenterColor, que establece en rojo el color del centroide de la estrella. Después, el código establece la propiedad SurroundColors para especificar diversos colores (almacenados en la matriz colors) en cada uno de los puntos de la matriz points. La última instrucción del código rellena el trazado en forma de estrella con el pincel degradado de trazado.

' Put the points of a polygon in an array.
Dim points As Point() =  { _
   New Point(75, 0), _
   New Point(100, 50), _
   New Point(150, 50), _
   New Point(112, 75), _
   New Point(150, 150), _
   New Point(75, 100), _
   New Point(0, 150), _
   New Point(37, 75), _
   New Point(0, 50), _
   New Point(50, 50)}
      
' Use the array of points to construct a path.
Dim path As New GraphicsPath()
path.AddLines(points)

' Use the path to construct a path gradient brush.
Dim pthGrBrush As New PathGradientBrush(path)
      
' Set the color at the center of the path to red.
pthGrBrush.CenterColor = Color.FromArgb(255, 255, 0, 0)
      
' Set the colors of the points in the array.
Dim colors As Color() = { _
   Color.FromArgb(255, 0, 0, 0), _
   Color.FromArgb(255, 0, 255, 0), _
   Color.FromArgb(255, 0, 0, 255), _
   Color.FromArgb(255, 255, 255, 255), _
   Color.FromArgb(255, 0, 0, 0), _
   Color.FromArgb(255, 0, 255, 0), _
   Color.FromArgb(255, 0, 0, 255), _
   Color.FromArgb(255, 255, 255, 255), _
   Color.FromArgb(255, 0, 0, 0), _
   Color.FromArgb(255, 0, 255, 0)}
      
pthGrBrush.SurroundColors = colors

' Fill the path with the path gradient brush.
e.Graphics.FillPath(pthGrBrush, path)
[C#]
// Put the points of a polygon in an array.
Point[] points = {
   new Point(75, 0),
   new Point(100, 50),
   new Point(150, 50),
   new Point(112, 75),
   new Point(150, 150),
   new Point(75, 100),
   new Point(0, 150),
   new Point(37, 75),
   new Point(0, 50),
   new Point(50, 50)};

// Use the array of points to construct a path.
GraphicsPath path = new GraphicsPath();
path.AddLines(points);

// Use the path to construct a path gradient brush.
PathGradientBrush pthGrBrush = new PathGradientBrush(path);

// Set the color at the center of the path to red.
pthGrBrush.CenterColor = Color.FromArgb(255, 255, 0, 0);

// Set the colors of the points in the array.
Color[] colors = {
   Color.FromArgb(255, 0, 0, 0),
   Color.FromArgb(255, 0, 255, 0),
   Color.FromArgb(255, 0, 0, 255), 
   Color.FromArgb(255, 255, 255, 255),
   Color.FromArgb(255, 0, 0, 0),
   Color.FromArgb(255, 0, 255, 0),
   Color.FromArgb(255, 0, 0, 255),
   Color.FromArgb(255, 255, 255, 255),
   Color.FromArgb(255, 0, 0, 0),  
   Color.FromArgb(255, 0, 255, 0)};

pthGrBrush.SurroundColors = colors;

// Fill the path with the path gradient brush.
e.Graphics.FillPath(pthGrBrush, path);

En la siguiente ilustración se muestra la estrella rellena.

En el ejemplo siguiente se construye un pincel degradado de trazado sobre la base de una matriz de puntos. A cada uno de los cinco puntos de la matriz se le asigna un color. Si se conectaran los cinco puntos con líneas rectas se obtendría un polígono de cinco lados. También se asigna un color al centro (centroide) de dicho polígono; en este ejemplo, el centro (80, 75) se establece en blanco. La última instrucción del código rellena un rectángulo con el pincel degradado de trazado.

El color utilizado para rellenar el rectángulo es blanco en (80, 75) y cambia gradualmente al alejarse de (80, 75) hacia los puntos de la matriz. Por ejemplo, al desplazarse de (80, 75) a (0, 0), el color cambia gradualmente de blanco a rojo y, al desplazarse de (80, 75) a (160, 0), el color cambia gradualmente de blanco a verde.

' Construct a path gradient brush based on an array of points.
Dim ptsF As PointF() =  { _
   New PointF(0, 0), _
   New PointF(160, 0), _
   New PointF(160, 200), _
   New PointF(80, 150), _
   New PointF(0, 200)}
      
Dim pBrush As New PathGradientBrush(ptsF)

' An array of five points was used to construct the path gradient
' brush. Set the color of each point in that array.  
'Point (0, 0) is red
'Point (160, 0) is green
'Point (160, 200) is green
'Point (80, 150) is blue
'Point (0, 200) is red
Dim colors As Color() =  { _
   Color.FromArgb(255, 255, 0, 0), _
   Color.FromArgb(255, 0, 255, 0), _
   Color.FromArgb(255, 0, 255, 0), _
   Color.FromArgb(255, 0, 0, 255), _
   Color.FromArgb(255, 255, 0, 0)}
pBrush.SurroundColors = colors

' Set the center color to white.
pBrush.CenterColor = Color.White

' Use the path gradient brush to fill a rectangle.
e.Graphics.FillRectangle(pBrush, New Rectangle(0, 0, 160, 200))
[C#]
// Construct a path gradient brush based on an array of points.
PointF[] ptsF = {
   new PointF(0, 0), 
   new PointF(160, 0), 
   new PointF(160, 200),
   new PointF(80, 150),
   new PointF(0, 200)};

PathGradientBrush pBrush = new PathGradientBrush(ptsF);

// An array of five points was used to construct the path gradient
// brush. Set the color of each point in that array.
Color[] colors = {
   Color.FromArgb(255, 255, 0, 0),  // (0, 0) red
   Color.FromArgb(255, 0, 255, 0),  // (160, 0) green
   Color.FromArgb(255, 0, 255, 0),  // (160, 200) green
   Color.FromArgb(255, 0, 0, 255),  // (80, 150) blue
   Color.FromArgb(255, 255, 0, 0)}; // (0, 200) red

pBrush.SurroundColors = colors;

// Set the center color to white.
pBrush.CenterColor = Color.White;

// Use the path gradient brush to fill a rectangle.
e.Graphics.FillRectangle(pBrush, new Rectangle(0, 0, 160, 200));

Observe que en el código anterior no hay ningún objeto GraphicsPath. El constructor PathGradientBrush concreto del ejemplo recibe una matriz de puntos pero no requiere un objeto GraphicsPath. Además, observe que se utiliza el pincel PathGradient para rellenar un rectángulo y no un trazado. El rectángulo es más grande que el trazado cerrado utilizado para definir el pincel, por lo que parte del rectángulo queda sin pintar. En la ilustración siguiente se muestra el rectángulo (línea de puntos) y la parte del rectángulo pintada por el pincel degradado de trazado.

Personalizar un degradado de trazado

Una forma de personalizar un pincel degradado de trazado consiste en establecer su propiedad FocusScales. Las escalas del foco especifican un trazado interno situado dentro del trazado principal. El color central se muestra en todo el interior de ese trazado interno y no sólo en el punto central.

En el ejemplo siguiente se crea un pincel degradado de trazado a partir de un trazado elíptico. El código establece el color del límite en azul, el color central en aguamarina y, a continuación, utiliza el pincel degradado de trazado para rellenar el trazado elíptico.

Después, el código establece las escalas del foco del pincel degradado de trazado. La escala del foco x se establece en 0,3 y la escala del foco y se establece en 0,8. El código llama al método TranslateTransform de un objeto Graphics para que la siguiente llamada a FillPath rellene una elipse situada a la derecha de la primera elipse.

Para ver el efecto de las escalas del foco, imagínese una elipse pequeña que comparte su centro con la elipse principal. La elipse pequeña (interna) es la elipse principal cuyo tamaño se ha ajustado (en torno al centro) horizontalmente por un factor de 0,3 y verticalmente por un factor de 0,8. Al desplazarse del límite de la elipse externa al límite de la interna, el color cambia gradualmente de azul a aguamarina. Al desplazarse del límite de la elipse interna al centro compartido, el color sigue siendo aguamarina.

' Create a path that consists of a single ellipse.
Dim path As New GraphicsPath()
path.AddEllipse(0, 0, 200, 100)

' Create a path gradient brush based on the elliptical path.
Dim pthGrBrush As New PathGradientBrush(path)

' Set the color along the entire boundary to blue.
' Changed variable name from color
Dim blueColor As Color() = {Color.Blue}
pthGrBrush.SurroundColors = blueColor

' Set the center color to aqua.
pthGrBrush.CenterColor = Color.Aqua
      
' Use the path gradient brush to fill the ellipse. 
e.Graphics.FillPath(pthGrBrush, path)
      
' Set the focus scales for the path gradient brush.
pthGrBrush.FocusScales = New PointF(0.3F, 0.8F)

' Use the path gradient brush to fill the ellipse again.
' Show this filled ellipse to the right of the first filled ellipse.
e.Graphics.TranslateTransform(220F, 0F)
e.Graphics.FillPath(pthGrBrush, path)
[C#]
// Create a path that consists of a single ellipse.
GraphicsPath path = new GraphicsPath();
path.AddEllipse(0, 0, 200, 100);

// Create a path gradient brush based on the elliptical path.
PathGradientBrush pthGrBrush = new PathGradientBrush(path);

// Set the color along the entire boundary to blue.
Color[] color = {Color.Blue};
pthGrBrush.SurroundColors = color;

// Set the center color to aqua.
pthGrBrush.CenterColor = Color.Aqua;

// Use the path gradient brush to fill the ellipse. 
e.Graphics.FillPath(pthGrBrush, path);

// Set the focus scales for the path gradient brush.
pthGrBrush.FocusScales = new PointF(0.3f, 0.8f);

// Use the path gradient brush to fill the ellipse again.
// Show this filled ellipse to the right of the first filled ellipse.
e.Graphics.TranslateTransform(220.0f, 0.0f);
e.Graphics.FillPath(pthGrBrush, path);

En la siguiente ilustración se muestra el resultado del código anterior. La elipse de la izquierda es de color aguamarina sólo en el punto central. La elipse de la derecha es de color aguamarina en todo el interior del trazado interno.

Otra manera de personalizar un pincel degradado de trazado consiste en especificar una matriz de colores de interpolación y una matriz de posiciones de interpolación.

En el ejemplo siguiente se crea un pincel degradado de trazado basado en un triángulo. El código establece la propiedad InterpolationColors del pincel degradado de trazado para especificar una matriz de colores de interpolación (verde oscuro, aguamarina, azul) y una matriz de posiciones de interpolación (0, 0.25, 1). Al desplazarse desde el límite del triángulo hacia el punto central, el color cambia gradualmente de verde oscuro a aguamarina y, luego, de aguamarina a azul. El cambio de verde oscuro a aguamarina se produce en el punto situado a un 25 por ciento de la distancia del verde oscuro al azul.

' Vertices of the outer triangle
Dim points As Point() = { _
   New Point(100, 0), _
   New Point(200, 200), _
   New Point(0, 200)}
      
' No GraphicsPath object is created. The PathGradientBrush
' object is constructed directly from the array of points.
Dim pthGrBrush As New PathGradientBrush(points)
      
' Create an array of colors containing dark green, aqua, and  blue.
Dim colors As Color() = { _
   Color.FromArgb(255, 0, 128, 0), _
   Color.FromArgb(255, 0, 255, 255), _
   Color.FromArgb(255, 0, 0, 255)}

' Dark green is at the boundary of the triangle.
' Aqua is 40 percent of the way from the boundary to the center point.
' Blue is at the center point.
Dim relativePositions As Single() =  { _
   0F, _
   0.4F, _
   1F}

Dim colorBlend As New ColorBlend()
colorBlend.Colors = colors
colorBlend.Positions = relativePositions
pthGrBrush.InterpolationColors = colorBlend

' Fill a rectangle that is larger than the triangle
' specified in the Point array. The portion of the
' rectangle outside the triangle will not be painted.
e.Graphics.FillRectangle(pthGrBrush, 0, 0, 200, 200)
[C#]
// Vertices of the outer triangle
Point[] points = {
   new Point(100, 0),
   new Point(200, 200),
   new Point(0, 200)};

// No GraphicsPath object is created. The PathGradientBrush
// object is constructed directly from the array of points.
PathGradientBrush pthGrBrush = new PathGradientBrush(points);

Color[] colors = {
   Color.FromArgb(255, 0, 128, 0),    // dark green
   Color.FromArgb(255, 0, 255, 255),  // aqua
   Color.FromArgb(255, 0, 0, 255)};   // blue

float[] relativePositions = {
   0f,       // Dark green is at the boundary of the triangle.
   0.4f,     // Aqua is 40 percent of the way from the boundary
             // to the center point.
   1.0f};    // Blue is at the center point.

ColorBlend colorBlend = new ColorBlend();
colorBlend.Colors = colors;
colorBlend.Positions = relativePositions;
pthGrBrush.InterpolationColors = colorBlend;

// Fill a rectangle that is larger than the triangle
// specified in the Point array. The portion of the
// rectangle outside the triangle will not be painted.
e.Graphics.FillRectangle(pthGrBrush, 0, 0, 200, 200);

En la siguiente ilustración se muestra el triángulo relleno con el pincel degradado de trazado personalizado.

Establecer el punto central

De manera predeterminada, el punto central de un pincel degradado de trazado está en el centroide del trazado utilizado para construir el pincel. La ubicación del punto central se puede cambiar estableciendo la propiedad CenterPoint de la clase PathGradientBrush.

En el ejemplo siguiente se crea un pincel degradado de trazado a partir de una elipse. El centro de la elipse está en el punto (70, 35), pero el punto central del pincel degradado de trazado se establece en (120, 40).

' Create a path that consists of a single ellipse.
Dim path As New GraphicsPath()
path.AddEllipse(0, 0, 140, 70)
      
' Use the path to construct a brush.
Dim pthGrBrush As New PathGradientBrush(path)
      
' Set the center point to a location that is not
' the centroid of the path.
pthGrBrush.CenterPoint = New PointF(120, 40)  
      
' Set the color at the center of the path to blue.
pthGrBrush.CenterColor = Color.FromArgb(255, 0, 0, 255)
      
' Set the color along the entire boundary 
' of the path to aqua.
Dim colors As Color() = {Color.FromArgb(255, 0, 255, 255)}
pthGrBrush.SurroundColors = colors
      
e.Graphics.FillEllipse(pthGrBrush, 0, 0, 140, 70)
[C#]
// Create a path that consists of a single ellipse.
GraphicsPath path = new GraphicsPath();
path.AddEllipse(0, 0, 140, 70);

// Use the path to construct a brush.
PathGradientBrush pthGrBrush = new PathGradientBrush(path);

// Set the center point to a location that is not
// the centroid of the path.
pthGrBrush.CenterPoint = new PointF(120, 40);

// Set the color at the center of the path to blue.
pthGrBrush.CenterColor = Color.FromArgb(255, 0, 0, 255);

// Set the color along the entire boundary 
// of the path to aqua.
Color[] colors = {Color.FromArgb(255, 0, 255, 255)};
pthGrBrush.SurroundColors = colors;

e.Graphics.FillEllipse(pthGrBrush, 0, 0, 140, 70);

En la siguiente ilustración se muestran la elipse rellena y el punto central del pincel degradado de trazado.

El punto central de un pincel degradado de trazado se puede establecer en una ubicación fuera del trazado utilizado para construir el pincel. En el siguiente ejemplo se reemplaza la llamada para establecer la propiedad CenterPoint del código anterior.

pthGrBrush.CenterPoint = New PointF(145, 35)
[C#]
pthGrBrush.CenterPoint = new PointF(145, 35);

En la siguiente ilustración se muestra el resultado con este cambio.

En la ilustración anterior, los puntos en el extremo derecho de la elipse no son de un color azul puro (aunque son de un color muy similar). Los colores del degradado se sitúan como si el relleno alcanzara el punto (145, 35) donde el color sería azul puro (0, 0, 255). Sin embargo, el relleno nunca llega a (145, 35) porque un pincel degradado de trazado sólo pinta dentro de su trazado.

Compartir a través de

Crear un degradado de trazado

Especificar puntos del límite

Personalizar un degradado de trazado

Establecer el punto central

Recursos adicionales