Condividi tramite

Procedura: creare una sfumatura lineare

  • Articolo

Aggiornamento: novembre 2007

GDI+ consente di utilizzare sfumature lineari in orizzontale, in verticale e in diagonale. Per impostazione predefinita il colore di una sfumatura lineare cambia in modo uniforme. È possibile tuttavia personalizzare una sfumatura lineare in modo che il colore si modifichi con modalità non uniforme.

Nell'esempio che segue si riempie una linea, un'ellisse e un rettangolo con un pennello a sfumatura lineare orizzontale.

Il costruttore LinearGradientBrush riceve quattro argomenti: due punti e due colori. Il primo punto (0, 10) è associato al primo colore (rosso), il secondo (200, 10) è associato al secondo colore (blu). Come prevedibile, la linea tracciata da (0, 10) a (200, 10) cambia gradualmente da rosso a blu.

Il numero 10 nei punti (50, 10) e (200, 10) non è rilevante. Ciò che conta è che la seconda coordinata è uguale per i due punti; la linea che li collega è pertanto orizzontale. Anche l'ellisse e il rettangolo passano in modo graduale da rosso a blu man mano che la coordinata passa da 0 a 200.

Nell'illustrazione che segue sono visibili la linea, l'ellisse e il rettangolo. Si noti che la sfumatura di colore si ripete per le coordinate orizzontali superiori a 200.

Sfumatura lineare

Per utilizzare sfumature lineari orizzontali

  • Impostare i colori rosso opaco e blu opaco come terzo argomento e quarto argomento rispettivamente.

    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)


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

Nell'esempio precedente le componenti del colore vengono modificate in modo lineare spostandosi dalla coordinata orizzontale 0 alla coordinata orizzontale 200. Ad esempio, un punto che si trova a metà tra la coordinata 0 e la 200 avrà una componente di blu intermedia tra 0 e 255.

GDI+ consente di regolare le modalità di variazione di un colore da un margine all'altro di una sfumatura. Si supponga di voler creare un pennello a sfumatura che passi da nero a rosso in conformità alla tabella che segue.

Coordinata orizzontale

Componenti RGB

0

(0, 0, 0)

40

(128, 0, 0)

200

(255, 0, 0)

Si noti che la componente rossa ha intensità media quando la coordinata orizzontale è solo al 20% del percorso tra 0 e 200.

Nell'esempio che segue si imposta la proprietà Blend di un oggetto LinearGradientBrush per associare tre intensità relative a tre posizioni relative. Come nella tabella precedente, un'intensità relativa di 0,5 è associata a una posizione relativa di 0,2. Un'ellisse e un rettangolo verranno riempiti con il pennello a sfumatura.

Nell'illustrazione che segue sono visibili il rettangolo e l'ellisse risultanti.

Sfumatura lineare

Per personalizzare sfumature lineari

  • Passare i colori nero opaco e rosso opaco come terzo argomento e quarto argomento rispettivamente.

    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)


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

Negli esempi precedenti si illustrava una sfumatura orizzontale, nella quale il colore cambia in modo graduale muovendosi lungo una linea orizzontale. È anche possibile definire sfumature verticali e diagonali.

Nell'esempio che segue i punti (0, 0) e (200, 100) vengono passati a un costruttore LinearGradientBrush. Il colore blu è associato a (0, 0), il colore verde a (200, 100). Una linea disegnata con penna di larghezza 10 e un'ellisse vengono riempite con il pennello a sfumatura lineare.

Nell'illustrazione che segue sono visibili la linea e l'ellisse. Si noti che il colore nell'ellisse cambia in modo graduale spostandosi lungo qualsiasi linea parallela a quella che passa per (0, 0) e (200, 100).

Sfumatura lineare

Per creare sfumature lineari diagonali

  • Passare i colori blu opaco e verde opaco come terzo argomento e quarto argomento rispettivamente.

    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)


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

Vedere anche

Altre risorse

Utilizzo di un pennello a sfumatura per il riempimento di forme

Grafica e disegno in Windows Form