Comment : 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 10 points (0, 10) et (200, 10) ne sont pas importants. Ce qui est important, c’est que les deux points ont la même coordonnée , la ligne qui les connecte est horizontale. Les points de suspension et le rectangle passent également progressivement du rouge au bleu, car 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.

A line, an ellipse, and a rectangle filled with a color gradient.

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

  • Passez le bleu opaque rouge et 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 à moitié intensité lorsque la coordonnée horizontale n’est que de 20 pour cent de la façon comprise 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 un ellipse et un rectangle avec le pinceau dégradé.

L’illustration suivante montre les points de suspension et le rectangle résultants.

An ellipse and a rectangle filled with a horizontal color gradient.

Pour personnaliser des dégradés linéaires

  • Passez le rouge opaque noir et opaque en tant que troisième et quatrième argument, 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 la largeur du stylet 10) et une ellipse sont remplies avec le 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).

A line and an ellipse filled with a diagonal color gradient.

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

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