Comment : créer un dégradé de tracé
Mise à jour : novembre 2007
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é.
.gif "Remarque") Remarque : |
|---|
Dans GDI+, un tracé correspond à une séquence de lignes et de courbes gérée par un objet GraphicsPath. Pour plus d'informations sur les tracés GDI+, consultez Tracés graphiques dans GDI+ et Génération et dessin de tracés. |
Pour remplir une ellipse avec un dégradé de tracé
- 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 cyan. L'illustration suivante montre l'ellipse remplie.
.png)
Par défaut, une brosse à dégradé de tracé ne s'étend pas à l'extérieur de la limite du tracé. Si vous utilisez la brosse à dégradé de tracé pour remplir une illustration qui s'étend au-delà de la limite du tracé, la zone de l'écran à l'extérieur du tracé ne sera pas remplie.
.png)
' 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)
// 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);
Pour spécifier des points sur la limite
L'exemple suivant génère une brosse à dégradé de tracé à partir d'un tracé en forme d'étoile. Le code définit la propriété CenterColor qui fixe le rouge comme couleur du centre de l'étoile. Puis, il définit la propriété SurroundColors pour spécifier les différentes couleurs (stockées dans le tableau colors) des points contenus dans le tableau 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)// 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'exemple suivant dessine un dégradé de tracé sans un objet GraphicsPath dans le code. Dans l'exemple, le constructeur particulier PathGradientBrush reçoit un tableau de points, mais ne nécessite pas d'objet GraphicsPath. Notez en outre que PathGradientBrush 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.
.png)
' 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))
// 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));
Pour personnaliser 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. Les échelles de focus spécifient 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, le cyan comme couleur centrale, puis il utilise la brosse à dégradé de tracé pour remplir le tracé elliptique.
Ensuite, il définit les échelles de focus de la brosse à dégradé de tracé. La valeur attribuée à l'échelle de focus x est 0,3 et celle attribuée à l'échelle de focus 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 remplisse une ellipse qui se situe à droite de la première.
Pour vous représenter l'effet des échelles de focus, 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 au cyan. Lorsque vous allez du contour de l'ellipse intérieure vers le centre commun, la couleur reste le cyan.
L'illustration suivante montre la sortie du code ci-dessous. Dans l'ellipse située à gauche, seul le point central est de couleur cyan. Quant à l'ellipse située à droite, elle est de couleur cyan partout sur le tracé intérieur.
.png)
' 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(220.0F, 0.0F)
e.Graphics.FillPath(pthGrBrush, path)
// 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);
Pour personnaliser avec interpolation
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 un tableau de couleurs d'interpolation (vert foncé, cyan, bleu) et un tableau 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é au cyan, puis du cyan au bleu. Le passage du vert foncé au cyan intervient à 25 pour cent de la distance qui sépare le vert foncé du bleu.
L'illustration suivante montre le triangle rempli avec la brosse à dégradé de tracé personnalisée.
.png)
' 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() = { _ 0.0F, _ 0.4F, _ 1.0F} 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)// 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);
Pour définir le 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)// 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é.
.png)
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 suivant remplace l'appel servant à définir la propriété CenterPoint dans le code précédent.
pthGrBrush.CenterPoint = New PointF(145, 35)pthGrBrush.CenterPoint = new PointF(145, 35);L'illustration suivante montre le résultat, après cette modification.
.png)
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é.