Partager via

Guide pratique pour créer un dégradé linéaire

  • Article

GDI+ fournit des dégradés linéaires horizontaux, verticaux et diagonals. Par défaut, la couleur d’un dégradé linéaire change uniformément. Toutefois, vous pouvez personnaliser un dégradé linéaire afin que la couleur change de manière non uniforme.

Note

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

L’exemple suivant remplit une ligne, un ellipse et un rectangle avec un pinceau de dégradé linéaire horizontal.

Le constructeur LinearGradientBrush reçoit quatre arguments : deux points et deux couleurs. Le premier point (0, 10) est associé à la première couleur (rouge), et le deuxième point (200, 10) est associé à la deuxième couleur (bleu). Comme prévu, la ligne dessinée de (0, 10) à (200, 10) change progressivement de rouge à bleu.

Les chiffres 10 dans les points (0, 10) et (200, 10) ne sont pas importants. Ce qui est important, c’est que les deux points ont la même deuxième coordonnée, la droite qui les relie est horizontale. L'ellipse et le rectangle passent également progressivement du rouge au bleu lorsque la coordonnée horizontale va de 0 à 200.

L’illustration suivante montre la ligne, l’ellipse et le rectangle. Notez que le dégradé de couleur se répète à mesure que la coordonnée horizontale augmente au-delà de 200.

ligne A, un ellipse et un rectangle rempli d’un dégradé de couleur.

Pour utiliser des dégradés linéaires horizontaux

  • Passez le rouge opaque et le bleu opaque en tant que troisième et quatrième argument, respectivement.

    public void UseHorizontalLinearGradients(PaintEventArgs e)
{
    LinearGradientBrush linGrBrush = new LinearGradientBrush(
       new Point(0, 10),
       new Point(200, 10),
       Color.FromArgb(255, 255, 0, 0),   // Opaque red
       Color.FromArgb(255, 0, 0, 255));  // Opaque blue

    Pen pen = new Pen(linGrBrush);

    e.Graphics.DrawLine(pen, 0, 10, 200, 10);
    e.Graphics.FillEllipse(linGrBrush, 0, 30, 200, 100);
    e.Graphics.FillRectangle(linGrBrush, 0, 155, 500, 30);
}

    Dim linGrBrush As New LinearGradientBrush( _
   New Point(0, 10), _
   New Point(200, 10), _
   Color.FromArgb(255, 255, 0, 0), _
   Color.FromArgb(255, 0, 0, 255))
Dim pen As New Pen(linGrBrush)

e.Graphics.DrawLine(pen, 0, 10, 200, 10)
e.Graphics.FillEllipse(linGrBrush, 0, 30, 200, 100)
e.Graphics.FillRectangle(linGrBrush, 0, 155, 500, 30)

Dans l’exemple précédent, les composants de couleur changent linéairement à mesure que vous passez d’une coordonnée horizontale de 0 à une coordonnée horizontale de 200. Par exemple, un point dont la première coordonnée est comprise entre 0 et 200 aura un composant bleu qui se situe entre 0 et 255.

GDI+ vous permet d’ajuster la façon dont une couleur varie d’un bord d’un dégradé à l’autre. Supposons que vous souhaitez créer un pinceau dégradé qui passe du noir au rouge en fonction du tableau suivant.

Coordonnée horizontale Composants RVB
0 (0, 0, 0)
40 (128, 0, 0)
200 (255, 0, 0)

Notez que le composant rouge est à moitié de son intensité lorsque la coordonnée horizontale n’est qu’à 20 pour cent du chemin entre 0 et 200.

L’exemple suivant définit la propriété LinearGradientBrush.Blend pour associer trois intensités relatives à trois positions relatives. Comme dans le tableau précédent, une intensité relative de 0,5 est associée à une position relative de 0,2. Le code remplit une ellipse et un rectangle avec le pinceau à dégradé.

L’illustration suivante montre l'ellipse et le rectangle résultant.

un ellipse et un rectangle rempli d’un dégradé de couleur horizontal.

Pour personnaliser des dégradés linéaires

  • Passez le noir opaque et le rouge opaque comme troisième et quatrième arguments, respectivement.

    public void CustomizeLinearGradients(PaintEventArgs e)
{
    LinearGradientBrush linGrBrush = new LinearGradientBrush(
       new Point(0, 10),
       new Point(200, 10),
       Color.FromArgb(255, 0, 0, 0),     // Opaque black
       Color.FromArgb(255, 255, 0, 0));  // Opaque red

    float[] relativeIntensities = { 0.0f, 0.5f, 1.0f };
    float[] relativePositions = { 0.0f, 0.2f, 1.0f };

    //Create a Blend object and assign it to linGrBrush.
    Blend blend = new Blend();
    blend.Factors = relativeIntensities;
    blend.Positions = relativePositions;
    linGrBrush.Blend = blend;

    e.Graphics.FillEllipse(linGrBrush, 0, 30, 200, 100);
    e.Graphics.FillRectangle(linGrBrush, 0, 155, 500, 30);
}

    Dim linGrBrush As New LinearGradientBrush( _
   New Point(0, 10), _
   New Point(200, 10), _
   Color.FromArgb(255, 0, 0, 0), _
   Color.FromArgb(255, 255, 0, 0))

Dim relativeIntensities As Single() = {0.0F, 0.5F, 1.0F}
Dim relativePositions As Single() = {0.0F, 0.2F, 1.0F}

'Create a Blend object and assign it to linGrBrush.
Dim blend As New Blend()
blend.Factors = relativeIntensities
blend.Positions = relativePositions
linGrBrush.Blend = blend

e.Graphics.FillEllipse(linGrBrush, 0, 30, 200, 100)
e.Graphics.FillRectangle(linGrBrush, 0, 155, 500, 30)

Les dégradés dans les exemples précédents ont été horizontaux ; autrement dit, la couleur change progressivement à mesure que vous déplacez le long de n’importe quelle ligne horizontale. Vous pouvez également définir des dégradés verticaux et des dégradés diagonals.

L’exemple suivant passe les points (0, 0) et (200, 100) à un constructeur LinearGradientBrush. La couleur bleue est associée à (0, 0) et la couleur verte est associée (200, 100). Une ligne (d'une épaisseur de trait de 10) et une ellipse sont remplies avec un pinceau à dégradé linéaire.

L’illustration suivante montre la ligne et l’ellipse. Notez que la couleur dans l’ellipse change progressivement lorsque vous parcourez n’importe quelle ligne parallèle à la ligne passant par (0, 0) et (200, 100).

une ligne A et une ellipse remplie d’un dégradé de couleur diagonale.

Pour créer des dégradés linéaires diagonals

  • Passez l'opaque bleu et l'opaque vert comme troisième et quatrième argument, respectivement.

    public void CreateDiagonalLinearGradients(PaintEventArgs e)
{
    LinearGradientBrush linGrBrush = new LinearGradientBrush(
       new Point(0, 0),
       new Point(200, 100),
       Color.FromArgb(255, 0, 0, 255),   // opaque blue
       Color.FromArgb(255, 0, 255, 0));  // opaque green

    Pen pen = new Pen(linGrBrush, 10);

    e.Graphics.DrawLine(pen, 0, 0, 600, 300);
    e.Graphics.FillEllipse(linGrBrush, 10, 100, 200, 100);
}

    Dim linGrBrush As New LinearGradientBrush( _
   New Point(0, 0), _
   New Point(200, 100), _
   Color.FromArgb(255, 0, 0, 255), _
   Color.FromArgb(255, 0, 255, 0))
' opaque blue
' opaque green
Dim pen As New Pen(linGrBrush, 10)

e.Graphics.DrawLine(pen, 0, 0, 600, 300)
e.Graphics.FillEllipse(linGrBrush, 10, 100, 200, 100)

Voir aussi