Procedura: creare una sfumatura lineareHow to: Create a Linear Gradient

GDI+GDI+ fornisce orizzontali, verticali e diagonali gradienti lineari. provides horizontal, vertical, and diagonal linear gradients. Per impostazione predefinita, il colore in una sfumatura lineare cambia in modo uniforme.By default, the color in a linear gradient changes uniformly. Tuttavia, è possibile personalizzare una sfumatura lineare in modo che il colore cambia in modo non uniformi.However, you can customize a linear gradient so that the color changes in a non-uniform fashion.

Nell'esempio seguente inserisce una riga di un'ellisse e un rettangolo con un pennello sfumato lineare orizzontale.The following example fills a line, an ellipse, and a rectangle with a horizontal linear gradient brush.

Il LinearGradientBrush costruttore riceve quattro argomenti: due punti e due colori.The LinearGradientBrush constructor receives four arguments: two points and two colors. Il primo punto (0, 10) è associato al primo colore (rosso) e il secondo punto (200, 10) è associato il secondo colore (blu).The first point (0, 10) is associated with the first color (red), and the second point (200, 10) is associated with the second color (blue). Come prevedibile, la riga disegnata da (0, 10) a (200, 10) cambia gradualmente da rosso a blu.As you would expect, the line drawn from (0, 10) to (200, 10) changes gradually from red to blue.

Il numero 10 punti (50, 10) e (200, 10) non sono importanti.The 10s in the points (50, 10) and (200, 10) are not important. L'aspetto importante è che i due punti hanno stessa coordinata secondo, ovvero la riga che li connettono è orizzontale.What is important is that the two points have the same second coordinate — the line connecting them is horizontal. I puntini di sospensione e il rettangolo inoltre modificare gradualmente da rosso a blu come coordinata orizzontale va da 0 a 200.The ellipse and the rectangle also change gradually from red to blue as the horizontal coordinate goes from 0 to 200.

Nella figura seguente mostra la riga, i puntini di sospensione e il rettangolo.The following illustration shows the line, the ellipse, and the rectangle. Si noti che la sfumatura di colore si ripete per la coordinata orizzontale aumenta oltre 200.Note that the color gradient repeats itself as the horizontal coordinate increases beyond 200.

Sfumatura lineareLinear Gradient

Per utilizzare sfumature lineare orizzontaleTo use horizontal linear gradients

  • Passare l'opaco rosso e blu opaco come terzo e quarto argomento, rispettivamente.Pass in the opaque red and opaque blue as the third and fourth argument, respectively.

    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)
    
    

Nell'esempio precedente, i componenti di colore modificare in modo lineare si sposta da una coordinata orizzontale pari a 0 per una coordinata orizzontale 200.In the preceding example, the color components change linearly as you move from a horizontal coordinate of 0 to a horizontal coordinate of 200. Ad esempio, un punto in cui la coordinata è compreso tra 0 e 200 disporrà di un componente blu che si trova a metà tra 0 e 255.For example, a point whose first coordinate is halfway between 0 and 200 will have a blue component that is halfway between 0 and 255.

GDI+GDI+ Consente di regolare il modo in cui che un colore varia da un bordo di una sfumatura a altro. allows you to adjust the way a color varies from one edge of a gradient to the other. Si supponga di che voler creare un pennello sfumato cambia da nero in rosso in base alla tabella seguente.Suppose you want to create a gradient brush that changes from black to red according to the following table.

Coordinata orizzontaleHorizontal coordinate Componenti RGBRGB components
00 (0, 0, 0)(0, 0, 0)
4040 (128, 0, 0)(128, 0, 0)
200200 (255, 0, 0)(255, 0, 0)

Si noti che il componente rosso intensità media quando la coordinata orizzontale corrisponde solo il 20% del modo in cui da 0 a 200.Note that the red component is at half intensity when the horizontal coordinate is only 20 percent of the way from 0 to 200.

L'esempio seguente imposta il Blend proprietà di un LinearGradientBrush oggetto da associare tre intensità relative a tre posizioni relative.The following example sets the Blend property of a LinearGradientBrush object to associate three relative intensities with three relative positions. Come indicato nella tabella precedente, un'intensità pari a 0,5 è associata a una posizione relativa di 0,2.As in the preceding table, a relative intensity of 0.5 is associated with a relative position of 0.2. Il codice verrà inserito un'ellisse e un rettangolo con pennello sfumato.The code fills an ellipse and a rectangle with the gradient brush.

Nella figura seguente viene illustrato il rettangolo e l'ellisse risultante.The following illustration shows the resulting ellipse and rectangle.

Sfumatura lineareLinear Gradient

Per personalizzare i gradienti lineariTo customize linear gradients

  • Passare l'opaco nero e rosso opaco come terzo e quarto argomento, rispettivamente.Pass in the opaque black and opaque red as the third and fourth argument, respectively.

    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)
    
    

Le sfumature negli esempi precedenti sono state orizzontale; vale a dire il colore cambia gradualmente mentre si sposta lungo una linea orizzontale.The gradients in the preceding examples have been horizontal; that is, the color changes gradually as you move along any horizontal line. È inoltre possibile definire sfumature verticali e diagonali.You can also define vertical gradients and diagonal gradients.

Nell'esempio seguente passa i punti (0, 0) e (200, 100) a un LinearGradientBrush costruttore.The following example passes the points (0, 0) and (200, 100) to a LinearGradientBrush constructor. Il colore blu è associato a (0, 0), ed è associato il colore verde (200, 100).The color blue is associated with (0, 0), and the color green is associated with (200, 100). Una riga (con la larghezza della penna 10) e un'ellisse vengono riempiti con pennello sfumato lineare.A line (with pen width 10) and an ellipse are filled with the linear gradient brush.

Nella figura seguente mostra la riga e l'ellisse.The following illustration shows the line and the ellipse. Si noti che il colore in ellisse cambia gradualmente mentre si sposta lungo una riga che sono parallelo a quella che passa attraverso (0, 0) e (200, 100).Note that the color in the ellipse changes gradually as you move along any line that is parallel to the line passing through (0, 0) and (200, 100).

Sfumatura lineareLinear Gradient

Per creare diagonale gradienti lineariTo create diagonal linear gradients

  • Passare l'opaco blu e verde opaco come terzo e quarto argomento, rispettivamente.Pass in the opaque blue and opaque green as the third and fourth argument, respectively.

    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)
    
    

Vedere ancheSee Also

Uso di un pennello a sfumatura per il riempimento di formeUsing a Gradient Brush to Fill Shapes
Grafica e disegno in Windows FormGraphics and Drawing in Windows Forms