Procedura: creare una sfumatura percorso

Articolo
09/12/2008

Aggiornamento: novembre 2007

La classe PathGradientBrush consente di personalizzare la modalità di riempimento di una forma con colori che si modificano in modo graduale. È possibile ad esempio specificare un colore per il centro di un percorso e un altro per il suo limite. È inoltre possibile specificare colori separati per ognuno dei diversi punti lungo il limite di un percorso.

Nota:
In GDI+ un percorso è una sequenza di linee e curve gestita da un oggetto GraphicsPath. Per ulteriori informazioni su percorsi GDI+, vedere Percorsi di oggetti Graphics in GDI+ e Costruzione e creazione di percorsi.

Per riempire un'ellisse con una sfumatura percorso

Nell'esempio che segue un'ellisse viene riempita con pennello a sfumatura percorso. Il colore centrale è impostato su blu e il colore del limite su azzurro. Nell'illustrazione che segue viene mostrata l'ellisse riempita.

Percorso sfumatura

Per impostazione predefinita, un pennello a sfumatura percorso non si estende oltre i limiti del percorso. Se si utilizza il pannello a sfumatura percorso per riempire una figura che si estende oltre i limiti del percorso, l'area dello schermo all'esterno del percorso non verrà riempita.

Percorso sfumatura

' Create a path that consists of a single ellipse.
Dim path As New GraphicsPath()
path.AddEllipse(0, 0, 140, 70)

' Use the path to construct a brush.
Dim pthGrBrush As New PathGradientBrush(path)

' Set the color at the center of the path to blue.
pthGrBrush.CenterColor = Color.FromArgb(255, 0, 0, 255)

' Set the color along the entire boundary 
' of the path to aqua.
Dim colors As Color() = {Color.FromArgb(255, 0, 255, 255)}
pthGrBrush.SurroundColors = colors

e.Graphics.FillEllipse(pthGrBrush, 0, 0, 140, 70)

// Create a path that consists of a single ellipse.
GraphicsPath path = new GraphicsPath();
path.AddEllipse(0, 0, 140, 70);

// Use the path to construct a brush.
PathGradientBrush pthGrBrush = new PathGradientBrush(path);

// Set the color at the center of the path to blue.
pthGrBrush.CenterColor = Color.FromArgb(255, 0, 0, 255);

// Set the color along the entire boundary 
// of the path to aqua.
Color[] colors = { Color.FromArgb(255, 0, 255, 255) };
pthGrBrush.SurroundColors = colors;

e.Graphics.FillEllipse(pthGrBrush, 0, 0, 140, 70);

Per specificare punti sul limite

Nell'esempio che segue viene creato un pennello a sfumatura percorso da un percorso a forma di stella. Viene impostata la proprietà CenterColor, con la quale il colore al centro della stella viene impostato su rosso. Viene quindi impostata la proprietà SurroundColors per specificare i vari colori, memorizzati nella matrice colors, in corrispondenza dei singoli punti nella matrice points. Con l'istruzione finale del codice il percorso a forma di stella viene riempito con il pennello a sfumatura percorso.

' Put the points of a polygon in an array.
Dim points As Point() = { _
   New Point(75, 0), _
   New Point(100, 50), _
   New Point(150, 50), _
   New Point(112, 75), _
   New Point(150, 150), _
   New Point(75, 100), _
   New Point(0, 150), _
   New Point(37, 75), _
   New Point(0, 50), _
   New Point(50, 50)}

' Use the array of points to construct a path.
Dim path As New GraphicsPath()
path.AddLines(points)

' Use the path to construct a path gradient brush.
Dim pthGrBrush As New PathGradientBrush(path)

' Set the color at the center of the path to red.
pthGrBrush.CenterColor = Color.FromArgb(255, 255, 0, 0)

' Set the colors of the points in the array.
Dim colors As Color() = { _
   Color.FromArgb(255, 0, 0, 0), _
   Color.FromArgb(255, 0, 255, 0), _
   Color.FromArgb(255, 0, 0, 255), _
   Color.FromArgb(255, 255, 255, 255), _
   Color.FromArgb(255, 0, 0, 0), _
   Color.FromArgb(255, 0, 255, 0), _
   Color.FromArgb(255, 0, 0, 255), _
   Color.FromArgb(255, 255, 255, 255), _
   Color.FromArgb(255, 0, 0, 0), _
   Color.FromArgb(255, 0, 255, 0)}

pthGrBrush.SurroundColors = colors

' Fill the path with the path gradient brush.
e.Graphics.FillPath(pthGrBrush, path)

// Put the points of a polygon in an array.
Point[] points = {
   new Point(75, 0),
   new Point(100, 50),
   new Point(150, 50),
   new Point(112, 75),
   new Point(150, 150),
   new Point(75, 100),
   new Point(0, 150),
   new Point(37, 75),
   new Point(0, 50),
   new Point(50, 50)};

// Use the array of points to construct a path.
GraphicsPath path = new GraphicsPath();
path.AddLines(points);

// Use the path to construct a path gradient brush.
PathGradientBrush pthGrBrush = new PathGradientBrush(path);

// Set the color at the center of the path to red.
pthGrBrush.CenterColor = Color.FromArgb(255, 255, 0, 0);

// Set the colors of the points in the array.
Color[] colors = {
   Color.FromArgb(255, 0, 0, 0),
   Color.FromArgb(255, 0, 255, 0),
   Color.FromArgb(255, 0, 0, 255), 
   Color.FromArgb(255, 255, 255, 255),
   Color.FromArgb(255, 0, 0, 0),
   Color.FromArgb(255, 0, 255, 0),
   Color.FromArgb(255, 0, 0, 255),
   Color.FromArgb(255, 255, 255, 255),
   Color.FromArgb(255, 0, 0, 0),  
   Color.FromArgb(255, 0, 255, 0)};

pthGrBrush.SurroundColors = colors;

// Fill the path with the path gradient brush.
e.Graphics.FillPath(pthGrBrush, path);

Nell'esempio riportato di seguito viene tracciata una sfumatura percorso senza oggetto GraphicsPath nel codice. Il costruttore PathGradientBrush particolare utilizzato nell'esempio riceve una matrice di punti ma non richiede un oggetto GraphicsPath. Si noti inoltre che il pennello PathGradientBrush viene utilizzato per riempire un rettangolo, non un percorso. Il rettangolo è più largo del percorso chiuso utilizzato per definire il pennello e pertanto non viene interamente riempito dal pennello. Nell'illustrazione che segue si mostra il rettangolo rappresentato dalla linea tratteggiata e la parte di esso riempita con il pennello a sfumatura percorso.

Sfumatura

' Construct a path gradient brush based on an array of points.
Dim ptsF As PointF() = { _
   New PointF(0, 0), _
   New PointF(160, 0), _
   New PointF(160, 200), _
   New PointF(80, 150), _
   New PointF(0, 200)}

Dim pBrush As New PathGradientBrush(ptsF)

' An array of five points was used to construct the path gradient
' brush. Set the color of each point in that array.  
'Point (0, 0) is red
'Point (160, 0) is green
'Point (160, 200) is green
'Point (80, 150) is blue
'Point (0, 200) is red
Dim colors As Color() = { _
   Color.FromArgb(255, 255, 0, 0), _
   Color.FromArgb(255, 0, 255, 0), _
   Color.FromArgb(255, 0, 255, 0), _
   Color.FromArgb(255, 0, 0, 255), _
   Color.FromArgb(255, 255, 0, 0)}
pBrush.SurroundColors = colors

' Set the center color to white.
pBrush.CenterColor = Color.White

' Use the path gradient brush to fill a rectangle.
e.Graphics.FillRectangle(pBrush, New Rectangle(0, 0, 160, 200))

// Construct a path gradient brush based on an array of points.
PointF[] ptsF = {
   new PointF(0, 0), 
   new PointF(160, 0), 
   new PointF(160, 200),
   new PointF(80, 150),
   new PointF(0, 200)};

PathGradientBrush pBrush = new PathGradientBrush(ptsF);

// An array of five points was used to construct the path gradient
// brush. Set the color of each point in that array.
Color[] colors = {
   Color.FromArgb(255, 255, 0, 0),  // (0, 0) red
   Color.FromArgb(255, 0, 255, 0),  // (160, 0) green
   Color.FromArgb(255, 0, 255, 0),  // (160, 200) green
   Color.FromArgb(255, 0, 0, 255),  // (80, 150) blue
   Color.FromArgb(255, 255, 0, 0)}; // (0, 200) red

pBrush.SurroundColors = colors;

// Set the center color to white.
pBrush.CenterColor = Color.White;

// Use the path gradient brush to fill a rectangle.
e.Graphics.FillRectangle(pBrush, new Rectangle(0, 0, 160, 200));

Per personalizzare una sfumatura percorso

Un modo per personalizzare un pennello a sfumatura percorso consiste nell'impostare la proprietà FocusScales. Le proporzioni del fuoco specificano un percorso interno che si trova dentro il percorso principale. Il colore centrale viene visualizzato ovunque all'interno del percorso interno e non nel solo punto centrale.

Nell'esempio che segue viene creato un pennello a sfumatura percorso in base a un percorso di forma ellittica. Il colore del limite viene impostato su blu e il colore centrale su azzurro; quindi si utilizza il pennello a sfumatura percorso per riempire il percorso ellittico.

Successivamente vengono impostate le proporzioni del fuoco del pennello a sfumatura percorso. La dimensione del fuoco x è impostata su 0,3, la dimensione y su 0,8. Viene chiamato il metodo TranslateTransform di un oggetto Graphics in modo che con la successiva chiamata a FillPath venga riempita un'ellisse collocata a destra della prima ellisse.

Per visualizzare l'effetto sulle dimensioni del fuoco si immagini una piccola ellisse che abbia il centro in comune con l'ellisse principale. L'ellisse più piccola, ovvero quella interna, è l'ellisse principale adattata in orizzontale in base a un fattore di 0,3 e in verticale in base a un fattore di 0,8 rispetto al centro. Spostandosi dal limite dell'ellisse esterna al limite dell'ellisse interna il colore cambia in modo graduale da blu ad azzurro. Spostandosi dal limite dell'ellisse interna al centro condiviso il colore rimane azzurro.

Nell''immagine che segue viene illustrato l'output del codice seguente. L'ellisse a sinistra è azzurra solo in corrispondenza del punto centrale. L'ellisse a destra è azzurra in qualsiasi punto all'interno del percorso interno.

Sfumatura

' Create a path that consists of a single ellipse.
Dim path As New GraphicsPath()
path.AddEllipse(0, 0, 200, 100)

' Create a path gradient brush based on the elliptical path.
Dim pthGrBrush As New PathGradientBrush(path)

' Set the color along the entire boundary to blue.
' Changed variable name from color
Dim blueColor As Color() = {Color.Blue}
pthGrBrush.SurroundColors = blueColor

' Set the center color to aqua.
pthGrBrush.CenterColor = Color.Aqua

' Use the path gradient brush to fill the ellipse. 
e.Graphics.FillPath(pthGrBrush, path)

' Set the focus scales for the path gradient brush.
pthGrBrush.FocusScales = New PointF(0.3F, 0.8F)

' Use the path gradient brush to fill the ellipse again.
' Show this filled ellipse to the right of the first filled ellipse.
e.Graphics.TranslateTransform(220.0F, 0.0F)
e.Graphics.FillPath(pthGrBrush, path)

// Create a path that consists of a single ellipse.
GraphicsPath path = new GraphicsPath();
path.AddEllipse(0, 0, 200, 100);

// Create a path gradient brush based on the elliptical path.
PathGradientBrush pthGrBrush = new PathGradientBrush(path);

// Set the color along the entire boundary to blue.
Color[] color = { Color.Blue };
pthGrBrush.SurroundColors = color;

// Set the center color to aqua.
pthGrBrush.CenterColor = Color.Aqua;

// Use the path gradient brush to fill the ellipse. 
e.Graphics.FillPath(pthGrBrush, path);

// Set the focus scales for the path gradient brush.
pthGrBrush.FocusScales = new PointF(0.3f, 0.8f);

// Use the path gradient brush to fill the ellipse again.
// Show this filled ellipse to the right of the first filled ellipse.
e.Graphics.TranslateTransform(220.0f, 0.0f);
e.Graphics.FillPath(pthGrBrush, path);

Per personalizzare mediante interpolazione

Un altro modo di personalizzare un pennello a sfumatura percorso è rappresentato dalla specifica di una matrice di colori di interpolazione e di una matrice di posizioni di interpolazione.

Nell'esempio che segue viene creato un pennello a sfumatura percorso basato su un triangolo. Viene impostata la proprietà InterpolationColors del pennello a sfumatura percorso per specificare una matrice di colori di interpolazione (verde, azzurro, blu) e una matrice di posizioni di interpolazione (0, 0,25, 1). Spostandosi dal limite del triangolo verso il punto centrale il colore cambia in modo graduale da verde ad azzurro e quindi da azzurro a blu. Il passaggio da verde ad azzurro avviene al 25% della distanza tra verde e blu.

Nell'illustrazione che segue è visibile il triangolo riempito con il pennello a sfumatura percorso personalizzato.

Percorso sfumatura

' Vertices of the outer triangle
Dim points As Point() = { _
   New Point(100, 0), _
   New Point(200, 200), _
   New Point(0, 200)}

' No GraphicsPath object is created. The PathGradientBrush
' object is constructed directly from the array of points.
Dim pthGrBrush As New PathGradientBrush(points)

' Create an array of colors containing dark green, aqua, and  blue.
Dim colors As Color() = { _
   Color.FromArgb(255, 0, 128, 0), _
   Color.FromArgb(255, 0, 255, 255), _
   Color.FromArgb(255, 0, 0, 255)}

' Dark green is at the boundary of the triangle.
' Aqua is 40 percent of the way from the boundary to the center point.
' Blue is at the center point.
Dim relativePositions As Single() = { _
   0.0F, _
   0.4F, _
   1.0F}

Dim colorBlend As New ColorBlend()
colorBlend.Colors = colors
colorBlend.Positions = relativePositions
pthGrBrush.InterpolationColors = colorBlend

' Fill a rectangle that is larger than the triangle
' specified in the Point array. The portion of the
' rectangle outside the triangle will not be painted.
e.Graphics.FillRectangle(pthGrBrush, 0, 0, 200, 200)

// Vertices of the outer triangle
Point[] points = {
   new Point(100, 0),
   new Point(200, 200),
   new Point(0, 200)};

// No GraphicsPath object is created. The PathGradientBrush
// object is constructed directly from the array of points.
PathGradientBrush pthGrBrush = new PathGradientBrush(points);

Color[] colors = {
   Color.FromArgb(255, 0, 128, 0),    // dark green
   Color.FromArgb(255, 0, 255, 255),  // aqua
   Color.FromArgb(255, 0, 0, 255)};   // blue

float[] relativePositions = {
   0f,       // Dark green is at the boundary of the triangle.
   0.4f,     // Aqua is 40 percent of the way from the boundary
             // to the center point.
   1.0f};    // Blue is at the center point.

ColorBlend colorBlend = new ColorBlend();
colorBlend.Colors = colors;
colorBlend.Positions = relativePositions;
pthGrBrush.InterpolationColors = colorBlend;

// Fill a rectangle that is larger than the triangle
// specified in the Point array. The portion of the
// rectangle outside the triangle will not be painted.
e.Graphics.FillRectangle(pthGrBrush, 0, 0, 200, 200);

Per impostare il punto centrale

Per impostazione predefinita il punto centrale di un pennello a sfumatura percorso si trova in corrispondenza del centroide del percorso utilizzare per creare il pennello. È possibile modificare la posizione del punto centrale impostando la proprietà CenterPoint della classe PathGradientBrush.

Nell'esempio che segue viene creato un pennello a sfumatura percorso basato su un'ellisse. Il centro dell'ellisse è rappresentato dalla posizione (70, 35), ma il punto centrale del pennello a sfumatura percorso è impostato su (120, 40).

' Create a path that consists of a single ellipse.
Dim path As New GraphicsPath()
path.AddEllipse(0, 0, 140, 70)

' Use the path to construct a brush.
Dim pthGrBrush As New PathGradientBrush(path)

' Set the center point to a location that is not
' the centroid of the path.
pthGrBrush.CenterPoint = New PointF(120, 40)

' Set the color at the center of the path to blue.
pthGrBrush.CenterColor = Color.FromArgb(255, 0, 0, 255)

' Set the color along the entire boundary 
' of the path to aqua.
Dim colors As Color() = {Color.FromArgb(255, 0, 255, 255)}
pthGrBrush.SurroundColors = colors

e.Graphics.FillEllipse(pthGrBrush, 0, 0, 140, 70)

// Create a path that consists of a single ellipse.
GraphicsPath path = new GraphicsPath();
path.AddEllipse(0, 0, 140, 70);

// Use the path to construct a brush.
PathGradientBrush pthGrBrush = new PathGradientBrush(path);

// Set the center point to a location that is not
// the centroid of the path.
pthGrBrush.CenterPoint = new PointF(120, 40);

// Set the color at the center of the path to blue.
pthGrBrush.CenterColor = Color.FromArgb(255, 0, 0, 255);

// Set the color along the entire boundary 
// of the path to aqua.
Color[] colors = { Color.FromArgb(255, 0, 255, 255) };
pthGrBrush.SurroundColors = colors;

e.Graphics.FillEllipse(pthGrBrush, 0, 0, 140, 70);

Nell'illustrazione che segue sono visibili l'ellisse riempita e il punto centrale del pennello a sfumatura percorso.

Percorso sfumatura

È possibile impostare il punto centrale di un pennello a sfumatura percorso su una posizione esterna al percorso utilizzato per creare il pennello. Nell'esempio riportato di seguito la chiamata per l'impostazione della proprietà CenterPoint utilizzata nel codice precedente viene sostituita da un'altra chiamata.
```
pthGrBrush.CenterPoint = New PointF(145, 35)
```
```
pthGrBrush.CenterPoint = new PointF(145, 35);
```
Nell'illustrazione che segue si mostra l'output del codice dopo la modifica.

Percorso sfumatura

Nell'illustrazione precedente i punti all'estrema destra dell'ellisse non sono perfettamente blu, anche se sono di un colore molto simile. I colori della sfumatura sono collocati come se il riempimento avesse raggiunto il punto (145, 35) in cui il colore sarebbe perfettamente blu (0, 0, 255). Il riempimento, però, non arriva al punto (145, 35) perché un pennello a sfumatura percorso non può colorare all'esterno del proprio percorso.

Vedere anche

Altre risorse

Utilizzo di un pennello a sfumatura per il riempimento di forme

Condividi tramite

Procedura: creare una sfumatura percorso

Per riempire un'ellisse con una sfumatura percorso

Per specificare punti sul limite

Per personalizzare una sfumatura percorso

Per personalizzare mediante interpolazione

Per impostare il punto centrale

Vedere anche

Altre risorse

Risorse aggiuntive