Création d'un dégradé de tracé

Article
04/11/2008

La classe PathGradientBrush vous permet de personnaliser la façon dont vous remplissez une forme avec des changements de couleurs progressifs. Vous pouvez, par exemple, spécifier une couleur pour le centre d'un tracé et une autre pour son contour. Vous pouvez également spécifier des couleurs différentes pour chacun des points situés sur le contour d'un tracé.

**Remarque **Dans GDI+, un tracé est une succession de lignes et de courbes gérées par un objet GraphicsPath. Pour plus d'informations sur les tracés GDI+, consultez Tracés et Génération et dessin de tracés.

L'exemple ci-dessous remplit une ellipse avec une brosse à dégradé de tracé. La couleur définie pour le centre est le bleu et celle du contour est aqua.

' 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);

L'illustration suivante montre l'ellipse remplie.

Par défaut, une brosse à dégradé de tracé ne dépasse pas le contour d'un tracé. Si vous vous utilisez une telle brosse pour remplir une figure qui s'étend au-delà du contour du tracé, la zone d'écran à l'extérieur du tracé ne sera pas remplie.

L'illustration suivante montre ce qui se produit si, dans le code précédent, vous remplacez l'appel de FillEllipse par e.Graphics.FillRectangle(pthGrBrush, 0, 10, 200, 40).

Spécification de points sur le contour

L'exemple suivant génère une brosse à dégradé de tracé à partir d'un tracé en forme d'étoile. Le code commence par définir la propriété CenterColor qui fixe le rouge comme couleur destinée au centre de l'étoile. Puis, il définit la propriété SurroundColors pour spécifier les différentes couleurs (stockées dans le tableau des couleurs) des points contenus dans la matrice des points. La dernière instruction du code remplit le tracé en forme d'étoile à l'aide de la brosse à dégradé de tracé.

' 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);

L'illustration suivante montre l'étoile remplie.

L'exemple suivant génère une brosse à dégradé de tracé à partir d'une matrice de points. Chacun des cinq points de la matrice reçoit une couleur. Si vous décidiez de relier ces points par des lignes droites, vous obtiendriez un polygone à cinq côtés. Le centre du polygone reçoit également une couleur. Dans cet exemple, celle assignée au centre est (80, 75) est le blanc. La dernière instruction de l'exemple remplit un rectangle avec la brosse à dégradé de tracée.

La couleur employée pour remplir le rectangle est le blanc à (80, 75), puis elle change progressivement à mesure que vous vous éloignez de (80, 75) et vous rapprochez des points de la matrice. Par exemple, lorsque vous vous passez de (80, 75) à (0, 0), la couleur vire peu à peu du blanc au rouge, et lorsque vous passez de (80, 75) à (160, 0), la couleur vire peu à peu du blanc au vert.

' 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));

Notez que le code qui précède ne contient pas d'objet GraphicsPath. Dans l'exemple, le constructeur particulier PathGradientBrush reçoit une matrice de points, mais ne nécessite pas d'objet GraphicsPath. Notez en outre que la brosse PathGradient sert à remplir un rectangle et non pas un tracé. Le rectangle étant plus long que le tracé fermé qui a servi à définir la brosse, celle-ci n'a pas peint entièrement le rectangle. L'illustration suivante montre le rectangle (ligne en pointillé) et la partie du rectangle que la brosse à dégradé de tracé a peinte.

Personnalisation d'un dégradé de tracé

L'une des méthodes permettant de personnaliser une brosse à dégradé de tracé consiste à définir la propriété FocusScales. Cette propriété spécifie un tracé qui se situe à l'intérieur du tracé principal. Au lieu d'occuper uniquement le point central, la couleur centrale couvre entièrement le tracé intérieur.

L'exemple suivant crée une brosse à dégradé de tracé à partir d'un tracé elliptique. Le code définit le bleu comme couleur de contour, l'aqua comme couleur centrale, puis il utilise la brosse à dégradé de tracé pour remplir le tracé elliptique.

Ensuite, il définit les échelles de focalisation de la brosse à dégradé de tracé. La valeur attribuée à l'échelle de focalisation x est 0,3 et celle attribuée à l'échelle de focalisation y est 0,8. Le code appelle la méthode TranslateTransform d'un objet Graphics de sorte que l'appel suivant à la méthode FillPath remplit une ellipse qui se situe à droite de la première.

Pour vous représenter l'effet des échelles de focalisation, imaginez une petite ellipse ayant le même centre que celui de l'ellipse principale. La petite ellipse (intérieure) correspond à l'ellipse principale ajustée (autour de son centre) selon un facteur égal à 0,3 dans le sens horizontal et à 0,8 dans le sens vertical. Lorsque vous allez du contour de l'ellipse extérieure vers celui de l'ellipse intérieure, la couleur passe progressivement du bleu à l'aqua. Lorsque vous allez du contour de l'ellipse intérieure vers le centre commun, la couleur reste l'aqua.

' 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);

L'illustration suivante montre le résultat du code ci-dessus. Dans l'ellipse située à gauche, seul le point central est de couleur aqua. Quant à l'ellipse située à droite, elle est de couleur aqua partout sur le tracé intérieur.

Il existe une autre manière de personnaliser une brosse à dégradé de tracé. Elle consiste à définir une matrice de couleurs d'interpolation et une matrice de positions d'interpolation.

L'exemple suivant crée une brosse à dégradé de tracé à partir d'un triangle. Le code définit la propriété InterpolationColors de la brosse à dégradé de tracé pour spécifier une matrice de couleurs d'interpolation (vert foncé, aqua, bleu) et une matrice de positions d'interpolation (0, 0,25, 1). Lorsque vous vous déplacez du contour du triangle vers le point central, la couleur passe progressivement du vert foncé à l'aqua, puis de l'aqua au bleu. Le passage du vert foncé à l'aqua intervient à 25 pour cent de la distance qui sépare le vert foncé du bleu.

' 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);

L'illustration suivante montre le triangle rempli avec la brosse à dégradé de tracé personnalisée.

Définition du point central

Par défaut, le point central d'une brosse à dégradé de tracé correspond au centre du tracé utilisé pour générer la brosse. Vous pouvez changer l'emplacement du point central en définissant la propriété CenterPoint de la classe PathGradientBrush.

L'exemple suivant crée une brosse à dégradé de tracé à partir d'une ellipse. Le centre de l'ellipse se situe à (70, 35), mais le point central de la brosse à dégradé de tracé reçoit pour valeurs (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);

L'illustration ci-dessous représente l'ellipse remplie et le point central de la brosse à dégradé de tracé.

Vous pouvez définir le point central d'une brosse à dégradé de tracé à un emplacement situé à l'extérieur du tracé qui a servi à générer la brosse. L'exemple de code suivant remplace l'appel servant à définir la propriété CenterPoint dans le code précédent.

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

L'illustration suivante montre le résultat, après cette modification.

Dans l'illustration précédente, les points situés à l'extrémité droite de l'ellipse ne sont pas d'un bleu pur (bien qu'ils s'en rapprochent). Les couleurs du dégradé sont placées comme si le remplissage atteignait le point (145, 35), là où la couleur serait un bleu pur (0, 0, 255). Cependant, le remplissage n'atteint jamais ce point (145, 35), puisqu'une brosse à dégradé de tracé peint uniquement l'intérieur de son tracé.

Partager via

Création d'un dégradé de tracé

Spécification de points sur le contour

Personnalisation d'un dégradé de tracé

Définition du point central

Ressources supplémentaires