Partager via

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

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.

Remarque

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

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

Le LinearGradientBrush constructeur 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 ligne qui les relie est horizontale. L'ellipse et le rectangle passent également progressivement du rouge au bleu à mesure que la coordonnée horizontale passe 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.

Une ligne, 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 comme 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 à mi-intensité lorsque la coordonnée horizontale se trouve seulement à 20 pour cent du chemin entre 0 et 200.

L’exemple suivant définit la LinearGradientBrush.Blend propriété 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ésultants.

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 en tant que 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 LinearGradientBrush constructeur. La couleur bleue est associée à (0, 0) et la couleur verte est associée (200, 100). Une ligne (avec une largeur de trait de 10) et une ellipse sont remplies à l'aide du pinceau de 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 et une ellipse remplie d’un dégradé de couleur diagonale.

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

  • Passez le bleu opaque et le vert opaque 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