Comment : créer un dégradé de tracé

Article
10/18/2023

La PathGradientBrush classe vous permet de personnaliser la façon dont vous remplissez une forme avec un changement progressif des couleurs. Par exemple, vous pouvez spécifier une couleur pour le centre d’un chemin d’accès et une autre couleur pour la limite d’un chemin d’accès. Vous pouvez également spécifier des couleurs distinctes pour chacun des points le long de la limite d’un chemin d’accès.

Remarque

Dans GDI+, un chemin est une séquence de lignes et de courbes conservées par un GraphicsPath objet. Pour plus d’informations sur les chemins GDI+, consultez Chemins d’accès graphiques dans GDI+ et Construction et chemins de dessin.

Les exemples de cet article sont des méthodes appelées à partir du gestionnaire d’événements d’un Paint contrôle.

Pour remplir un ellipse avec un dégradé de chemin

L’exemple suivant remplit un ellipse avec un pinceau dégradé de chemin. La couleur centrale est définie sur bleu et la couleur de limite est définie sur aqua. L’illustration suivante montre l’ellipse remplie.

Gradient Path fills an ellipse.

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 dégradé de chemin pour remplir une figure qui s’étend au-delà de la limite du chemin, la zone de l’écran en dehors du chemin n’est pas remplie.

L’illustration suivante montre ce qui se passe si vous modifiez l’appel Graphics.FillEllipse dans le code e.Graphics.FillRectangle(pthGrBrush, 0, 10, 200, 40)suivant pour :

Gradient Path extended beyond boundary of the path.

public void FillEllipseWithPathGradient(PaintEventArgs e)
{
    // 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);
}

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

L’exemple de code précédent est conçu pour être utilisé avec Windows Forms et nécessite l’e PaintEventArgs , qui est un paramètre de PaintEventHandler.

Pour spécifier des points sur la limite

L’exemple suivant construit un pinceau dégradé de chemin à partir d’un chemin en forme d’étoile. Le code définit la CenterColor propriété, qui définit la couleur au centroïde de l’étoile sur rouge. Ensuite, le code définit la SurroundColors propriété pour spécifier différentes couleurs (stockées dans le colors tableau) aux points individuels du points tableau. L’instruction de code finale remplit le chemin en forme d’étoile avec le pinceau de dégradé de chemin.

public void ConstructBrushFromStarShapedPath(PaintEventArgs e)
{
    // 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);
}

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

L’exemple suivant dessine un dégradé de chemin d’accès sans GraphicsPath objet dans le code. Le constructeur particulier PathGradientBrush de l’exemple reçoit un tableau de points, mais ne nécessite pas d’objet GraphicsPath . Notez également que l’objet PathGradientBrush est utilisé pour remplir un rectangle, et non un chemin d’accès. Le rectangle est plus grand que le chemin fermé utilisé pour définir le pinceau, de sorte que certains du rectangle ne sont pas peints par le pinceau. L’illustration suivante montre le rectangle (ligne en pointillé) et la partie du rectangle peint par le pinceau de dégradé de chemin :

Gradient portion painted by the path gradient brush.

public void DrawPathGradentWthoutGraphicsPath(PaintEventArgs e)
{
    // 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));
}

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

Pour personnaliser un dégradé de chemin d’accès

Une façon de personnaliser un pinceau de dégradé de chemin consiste à définir sa FocusScales propriété. 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.

L’exemple suivant crée un pinceau dégradé de chemin d’accès basé sur un chemin d’accès elliptique. Le code définit la couleur de limite en bleu, définit la couleur centrale sur aqua, puis utilise le pinceau dégradé de chemin pour remplir le chemin d’accès elliptique.

Ensuite, le code définit les échelles de focus du pinceau de dégradé de chemin. 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 TranslateTransform méthode d’un Graphics objet afin que l’appel FillPath suivant remplit un 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. Le petit (intérieur) ellipse est le ellipse principal mis à l’échelle (à propos de son centre) horizontalement par un facteur de 0,3 et verticalement par un facteur de 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.

L'illustration suivante montre la sortie du code suivant. L’ellipse sur la gauche est aqua seulement au point central. L’ellipse sur la droite est aqua partout à l’intérieur du chemin intérieur.

Gradient effect of focus scales

public void CustomizePathGradientBrush(PaintEventArgs e)
{
    // 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);
}

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

Pour personnaliser avec interpolation

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

L’exemple suivant crée un pinceau dégradé de chemin d’accès basé sur un triangle. Le code définit la InterpolationColors propriété du pinceau 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.

L’illustration suivante montre le triangle rempli avec le pinceau de dégradé de chemin personnalisé.

Triangle filled with custom path gradient brush.

public void CustomizeWithInterpolation(PaintEventArgs e)
{
    // 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);
}

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

Pour définir le point central

Par défaut, le point central d’un pinceau dégradé de chemin se trouve au centroïde du chemin utilisé pour construire le pinceau. Vous pouvez modifier l’emplacement du point central en définissant la CenterPoint propriété de la PathGradientBrush classe.

L’exemple suivant crée un pinceau de dégradé de chemin d’accès basé sur un ellipse. Le centre de l’ellipse est à (70, 35), mais le point central du pinceau de dégradé de chemin est défini sur (120, 40).

public void SetCenterPoint(PaintEventArgs e)
{
    // 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);
}

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

L’illustration suivante montre les points de suspension remplis et le point central du pinceau de dégradé de chemin :

Gradient Path with filled ellipse and center point.

Vous pouvez définir le point central d’un pinceau de dégradé de chemin sur un emplacement en dehors du chemin utilisé pour construire le pinceau. L’exemple suivant remplace l’appel pour définir la CenterPoint propriété dans le code précédent.

public void SetCenterPointOutsidePath(PaintEventArgs e)
{
    // 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(145, 35);

    // 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);
}

pthGrBrush.CenterPoint = New PointF(145, 35)

L’illustration suivante montre la sortie avec cette modification :

Gradient Path with center point outside the path.

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 a atteint le point (145, 35) où la couleur serait bleue pure (0, 0, 255). Mais le remplissage n’atteint jamais (145, 35) car un pinceau dégradé de chemin peint uniquement à l’intérieur de son chemin.

Compilation du code

Les exemples précédents sont conçus pour être utilisés avec Windows Forms et nécessitent PaintEventArgse, qui est un paramètre du Paint gestionnaire d’événements.

Voir aussi

Utilisation d'un pinceau à dégradé pour remplir des formes

Share via