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

La classe PathGradientBrush vous permet de personnaliser la façon dont vous remplissez une forme avec un changement progressif des couleurs. Un objet PathGradientBrush a un chemin de limite et un point central. Vous pouvez spécifier une couleur pour le point central et une autre couleur pour la limite. Vous pouvez également spécifier des couleurs distinctes pour chacun des points le long de la limite.

Note

Dans GDI+, un chemin est une séquence de lignes et de courbes conservées par un objet GraphicsPath . Pour plus d’informations sur les tracés GDI+, consultez Tracés et Construction et dessin de tracés.

L’exemple suivant remplit une ellipse avec un pinceau à dégradé de tracé. La couleur centrale est définie sur bleu et la couleur de limite est définie sur aqua.

// Create a path that consists of a single ellipse.
GraphicsPath path;
path.AddEllipse(0, 0, 140, 70);

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

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

// Set the color along the entire boundary of the path to aqua.
Color colors[] = {Color(255, 0, 255, 255)};
int count = 1;
pthGrBrush.SetSurroundColors(colors, &count);

graphics.FillEllipse(&pthGrBrush, 0, 0, 140, 70);

L’illustration suivante montre l’ellipse remplie.

illustration montrant une ellipse avec un remplissage dégradé

Par défaut, un pinceau de dégradé de chemin ne s’étend pas en dehors de la limite du chemin. Si vous utilisez le pinceau de dégradé de chemin pour remplir une forme qui s’étend au-delà de la limite du chemin, la zone de l’écran en dehors du chemin ne sera pas remplie. L’illustration suivante montre ce qui se passe si vous remplacez l’appel Graphics::FillEllipse dans le code précédent par graphics.FillRectangle(&pthGrBrush, 0, 10, 200, 40).

illustration montrant une tranche horizontale de l’ellipse précédente

Spécification de points sur la limite

L’exemple suivant construit un pinceau de dégradé de chemin à partir d’un chemin en forme d’étoile. Le code appelle la méthode PathGradientBrush ::SetCenterColor pour définir la couleur au centroïde de l’étoile sur rouge. Ensuite, le code appelle la méthode PathGradientBrush ::SetSurroundColors pour spécifier différentes couleurs (stockées dans le tableau de couleurs ) aux points individuels du tableau de points . L’instruction de code finale remplit le chemin en forme d’étoile avec le pinceau de dégradé de chemin.

// Put the points of a polygon in an array.
Point points[] = {Point(75, 0),    Point(100, 50), 
                  Point(150, 50),  Point(112, 75),
                  Point(150, 150), Point(75, 100), 
                  Point(0, 150),   Point(37, 75), 
                  Point(0, 50),    Point(50, 50)};

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

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

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

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

int count = 10;
pthGrBrush.SetSurroundColors(colors, &count);

// Fill the path with the path gradient brush.
graphics.FillPath(&pthGrBrush, &path);

L’illustration suivante montre l’étoile remplie.

illustration montrant une étoile à cinq branches se remplissant du rouge au centre vers différentes couleurs dans chacune de ses branches

L’exemple suivant construit un pinceau de dégradé de chemin en fonction d’un tableau de points. Une couleur est affectée à chacun des cinq points du tableau. Si vous deviez connecter les cinq points par lignes droites, vous obtiendriez un polygone à cinq côtés. Une couleur est également affectée au centre (centroïde) de ce polygone , dans cet exemple, le centre (80, 75) est défini sur blanc. L’instruction de code finale dans l’exemple remplit un rectangle avec le pinceau de dégradé de chemin.

La couleur utilisée pour remplir le rectangle est blanche à (80, 75) et change progressivement lorsque vous vous éloignez de (80, 75) vers les points du tableau. Par exemple, lorsque vous passez de (80, 75) à (0, 0), la couleur passe progressivement du blanc au rouge, et à mesure que vous passez de (80, 75) à (160, 0), la couleur change progressivement de blanc à vert.

// Construct a path gradient brush based on an array of points.
PointF ptsF[] = {PointF(0.0f, 0.0f), 
                 PointF(160.0f, 0.0f), 
                 PointF(160.0f, 200.0f),
                 PointF(80.0f, 150.0f),
                 PointF(0.0f, 200.0f)};

PathGradientBrush pBrush(ptsF, 5);

// 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(255, 255, 0, 0),  // (0, 0) red
                  Color(255, 0, 255, 0),  // (160, 0) green
                  Color(255, 0, 255, 0),  // (160, 200) green
                  Color(255, 0, 0, 255),  // (80, 150) blue
                  Color(255, 255, 0, 0)}; // (0, 200) red

int count = 5;
pBrush.SetSurroundColors(colors, &count);

// Set the center color to white.
pBrush.SetCenterColor(Color(255, 255, 255, 255));

// Use the path gradient brush to fill a rectangle.
graphics.FillRectangle(&pBrush, Rect(0, 0, 180, 220));

Notez qu’il n’existe aucun objet GraphicsPath dans le code précédent. Le constructeur PathGradientBrush particulier dans l’exemple reçoit un pointeur vers un tableau de points, mais ne nécessite pas d’objet GraphicsPath . Notez également que le pinceau de dégradé de chemin est utilisé pour remplir un rectangle, pas un chemin. Le rectangle est plus grand que le chemin utilisé pour définir le pinceau, si bien qu’une partie du rectangle n’est pas peinte par le pinceau. L’illustration suivante montre le rectangle (ligne en pointillés) et la partie du rectangle peinte par le pinceau de dégradé de tracé.

illustration montrant un rectangle délimité par une ligne en pointillés, partiellement peint par un dégradé multicolore

Personnalisation d’un dégradé de chemin d’accès

Une façon de personnaliser un pinceau de dégradé de chemin consiste à définir ses échelles de focus. Les échelles de focus spécifient un chemin d’accès interne qui se trouve à l’intérieur du chemin principal. La couleur centrale s’affiche partout à l’intérieur de ce chemin intérieur plutôt qu’au point central uniquement. Pour définir les échelles de focalisation d’un pinceau de dégradé de tracé, appelez la méthode PathGradientBrush::SetFocusScales.

L’exemple suivant crée un pinceau à dégradé de tracé à partir d’un tracé elliptique. Le code définit la couleur de limite sur bleu, la couleur centrale sur aqua, puis utilise le pinceau de dégradé de chemin pour remplir le chemin elliptique.

Ensuite, le code définit les échelles focales du pinceau de dégradé de tracé. L’échelle du focus x est définie sur 0,3, et l’échelle du focus y est définie sur 0,8. Le code appelle la méthode Graphics ::TranslateTransform d’un objet Graphics afin que l’appel suivant à Graphics ::FillPath remplit une ellipse qui se trouve à droite du premier ellipse.

Pour voir l’effet des échelles de focus, imaginez un petit ellipse qui partage son centre avec l’ellipse principale. La petite ellipse (intérieure) est l’ellipse principale mise à l’échelle, par rapport à son centre, horizontalement par un facteur 0,3 et verticalement par un facteur 0,8. Lorsque vous passez de la limite de l’ellipse externe à la limite de l’ellipse interne, la couleur passe progressivement du bleu à l’aqua. Lorsque vous passez de la limite de l’ellipse interne au centre partagé, la couleur reste aqua.

// Create a path that consists of a single ellipse.
GraphicsPath path;
path.AddEllipse(0, 0, 200, 100);

// Create a path gradient brush based on the elliptical path.
PathGradientBrush pthGrBrush(&path);
pthGrBrush.SetGammaCorrection(TRUE);

// Set the color along the entire boundary to blue.
Color color(Color(255, 0, 0, 255));
INT num = 1;
pthGrBrush.SetSurroundColors(&color, &num);

// Set the center color to aqua.
pthGrBrush.SetCenterColor(Color(255, 0, 255, 255));
 
// Use the path gradient brush to fill the ellipse. 
graphics.FillPath(&pthGrBrush, &path);

// Set the focus scales for the path gradient brush.
pthGrBrush.SetFocusScales(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.
graphics.TranslateTransform(220.0f, 0.0f);
graphics.FillPath(&pthGrBrush, &path);

L’illustration suivante montre la sortie du code précédent. L’ellipse sur la gauche est aqua seulement au point central. L’ellipse à droite est cyan sur toute la surface à l’intérieur du tracé intérieur.

illustration montrant deux ellipses avec un dégradé allant de l’aqua au bleu : la première contient très peu d’aqua ; la seconde en contient beaucoup plus

Une autre façon de personnaliser un pinceau dégradé de chemin consiste à spécifier un tableau de couleurs prédéfinies et un tableau de positions d’interpolation.

L’exemple suivant crée un pinceau de dégradé de chemin basé sur un triangle. Le code appelle la méthode PathGradientBrush ::SetInterpolationColors du pinceau de dégradé de chemin pour spécifier un tableau de couleurs d’interpolation (vert foncé, aqua, bleu) et un tableau de positions d’interpolation (0, 0,25, 1). Lorsque vous passez de la limite du triangle au point central, la couleur passe progressivement du vert foncé à l’aqua, puis de l’aqua au bleu. Le changement de vert foncé à aqua se produit en 25 pour cent de la distance entre le vert foncé et le bleu.

// Vertices of the triangle
Point points[] = {Point(100, 0), 
                  Point(200, 200), 
                  Point(0, 200)};

// No GraphicsPath object is created. The PathGradient
// brush is constructed directly from the array of points.
PathGradientBrush pthGrBrush(points, 3);

Color presetColors[] = {
   Color(255, 0, 128, 0),    // Dark green
   Color(255, 0, 255, 255),  // Aqua
   Color(255, 0, 0, 255)};   // Blue

REAL interpPositions[] = {
   0.0f,   // Dark green is at the boundary of the triangle.
   0.25f,  // Aqua is 25 percent of the way from the boundary
           // to the center point.
   1.0f};  // Blue is at the center point.
                  
pthGrBrush.SetInterpolationColors(presetColors, interpPositions, 3);

// 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.
graphics.FillRectangle(&pthGrBrush, 0, 0, 200, 200);

L’illustration suivante montre la sortie du code précédent.

illustration montrant un triangle qui nuance du bleu au centre, à l’aqua, au vert aux bords

Définition du point central

Par défaut, le point central d’un pinceau de dégradé de chemin est situé au centroïde du chemin utilisé pour créer le pinceau. Vous pouvez modifier l’emplacement du point central en appelant la méthode PathGradientBrush ::SetCenterPoint de la classe PathGradientBrush .

L’exemple suivant crée un pinceau à dégradé de tracé à partir d’une ellipse. Le centre de l’ellipse est situé en (70, 35), mais le centre du pinceau de dégradé de tracé est défini à (120, 40).

// Create a path that consists of a single ellipse.
GraphicsPath path;
path.AddEllipse(0, 0, 140, 70);

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

// Set the center point to a location that is not the centroid of the path.
pthGrBrush.SetCenterPoint(Point(120, 40));

// Set the color at the center point to blue.
pthGrBrush.SetCenterColor(Color(255, 0, 0, 255));

// Set the color along the entire boundary of the path to aqua.
Color colors[] = {Color(255, 0, 255, 255)};
int count = 1;
pthGrBrush.SetSurroundColors(colors, &count);

graphics.FillEllipse(&pthGrBrush, 0, 0, 140, 70);

L’illustration suivante montre l'ellipse remplie et le point central du pinceau de dégradé de chemin.

illustration montrant une ellipse dont le dégradé passe du bleu à l’aqua à partir d’un point central situé près d’une extrémité

Vous pouvez définir le point central d’un pinceau de dégradé de chemin sur un emplacement extérieur au chemin ayant servi à construire le pinceau. Dans le code précédent, si vous remplacez l’appel à PathGradientBrush ::SetCenterPointpthGrBrush.SetCenterPoint(Point(145, 35))par , vous obtiendrez le résultat suivant.

illustration montrant un ellipse qui remplit de bleu à aqua à partir d’un point central qui se trouve à l’extérieur du bord de l’ellipse

Dans l’illustration précédente, les points situés à l’extrême droite de l’ellipse ne sont pas bleu pur (bien qu’ils soient très proches). Les couleurs du dégradé sont positionnées comme si le remplissage avait été autorisé à atteindre le point (145, 35), la couleur aurait atteint le bleu pur (0, 0, 255). Cependant, le remplissage n'atteint jamais le point (145, 35) car un pinceau de dégradé de chemin peint uniquement à l'intérieur de son chemin.

Comment la couleur du dégradé de chemin est calculée

Pour chaque pixel à l’intérieur du chemin, le pinceau caste un rayon imaginaire du point central, à travers le pixel, à l’endroit où le rayon croise la limite du chemin. La couleur à ce pixel est ensuite interpolée linéairement entre la couleur centrale et la couleur de limite, en fonction de la position du pixel le long de ce rayon. Plus précisément, le facteur d’interpolation est le rapport de la distance entre le point central et le pixel, divisé par la distance totale entre le point central et l’intersection de la limite.

Lorsque le point central est en dehors du chemin, les pixels situés sur le côté du chemin le plus proche du point central ont des rayons courts (car la limite se trouve à proximité dans cette direction). Étant donné que ces pixels sont relativement loin le long de leurs rayons courts, ils apparaissent plus près de la couleur centrale. Les pixels de l’extrême côté du chemin ont des rayons longs et semblent plus proches de la couleur de limite. Cela explique pourquoi, dans l’illustration précédente, la limite près du point central externe affiche une couleur proche du bleu (couleur centrale) plutôt qu’aqua (couleur de limite).

Commentaires

Cette page a-t-elle été utile ?

Last updated on 2026-08-14