Creazione di una sfumatura percorso
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 di curve mantenuta da un oggetto GraphicsPath. Per ulteriori informazioni sui percorsi GDI+, vedere Percorsi e Costruzione e creazione di percorsi
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.
' 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)
[C#]
// 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);
Nell'illustrazione che segue viene mostrata l'ellisse riempita.
.png)
Per impostazione predefinita un pennello a sfumatura percorso non si estende oltre il limite del percorso. Se si utilizza il pennello a sfumatura percorso per riempire una figura estesa oltre il limite del percorso l'area dello schermo esterna al percorso non verrà riempita.
Nell'illustrazione che segue si mostra cosa avviene se si modifica la chiamata FillEllipse nel codice precedente in e.Graphics.FillRectangle(pthGrBrush, 0, 10, 200, 40).
.png)
Specificazione di 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 colori, in corrispondenza dei singoli punti nella matrice punti. 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)
[C#]
// 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'illustrazione che segue è visibile la stella dopo il riempimento.
.png)
Nell'esempio che segue viene creato un pennello a sfumatura percorso in base a una matrice di punti. A ciascuno dei cinque punti della matrice viene assegnato un colore. Se si collegano i cinque punti con linee rette si ottiene un pentagono. Anche al centro del poligono (centroide) viene assegnato un colore; nell'esempio il centro (80, 75) è impostato su bianco. Con l'istruzione finale dell'esempio un rettangolo viene riempito con il pennello a sfumatura percorso.
Il colore utilizzato per riempire il rettangolo è bianco in corrispondenza di (80, 75) e cambia in modo graduale nel passaggio agli altri punti della matrice. Spostandosi ad esempio da (80, 75) a (0, 0), il colore si modifica in modo graduale da bianco a rosso; spostandosi da (80, 75) a (160, 0), passa da bianco a verde.
' 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))
[C#]
// 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));
Si noti che nel codice precedente è assente l'oggetto GraphicsPath. Il costruttore PathGradientBrush utilizzato nell'esempio riceve una matrice di punti ma non richiede un oggetto GraphicsPath. Si noti inoltre che il pennello PathGradient 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.
.png)
Personalizzazione di una sfumatura percorso
Un modo per personalizzare un pennello a sfumatura percorso è rappresentato dall'impostazione della 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 centrale. 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 si riempia 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.
' 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(220F, 0F)
e.Graphics.FillPath(pthGrBrush, path)
[C#]
// 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);
Nell'illustrazione che segue si mostra l'output del codice precedente. L'ellisse a sinistra è azzurra solo in corrispondenza del punto centrale. L'ellisse a destra è azzurra in qualsiasi punto all'interno del percorso interno.
.png)
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.
' 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() = { _
0F, _
0.4F, _
1F}
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)
[C#]
// 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);
Nell'illustrazione che segue è visibile il triangolo riempito con il pennello a sfumatura percorso personalizzato.
.png)
Impostazione del 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)
[C#]
// 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.
.png)
È 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)
[C#]
pthGrBrush.CenterPoint = new PointF(145, 35);
Nell'illustrazione che segue si mostra l'output del codice dopo la modifica.
.png)
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.