Creazione di una sfumatura di percorso

La classe PathGradientBrush consente di personalizzare il modo in cui si riempie una forma con colori gradualmente modificati. Un oggetto PathGradientBrush ha un percorso limite e un punto centrale. È possibile specificare un colore per il punto centrale e un altro colore per il limite. È anche possibile specificare colori separati per ognuno di diversi punti lungo il limite.

Nota

In GDI+, un percorso è una sequenza di linee e curve gestite da un oggetto GraphicsPath . Per altre informazioni sui percorsi GDI+, vedere Percorsie costruzione e percorsi di disegno.

 

Nell'esempio seguente viene riempita un'ellisse con un pennello sfumatura percorso. Il colore centrale è impostato su blu e il colore limite è impostato su aqua.

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

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

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

// Set the color along the entire boundary of the path to aqua.
Color colors[] = {Color(255, 0, 255, 255)};
int count = 1;
pthGrBrush.SetSurroundColors(colors, &count);

graphics.FillEllipse(&pthGrBrush, 0, 0, 140, 70);

La figura seguente mostra i puntini di sospensione riempiti.

Per impostazione predefinita, un pennello sfumatura percorso non si estende all'esterno del limite del percorso. Se si usa il pennello sfumatura percorso per riempire una forma che si estende oltre il limite del percorso, l'area dello schermo all'esterno del percorso non verrà riempita. La figura seguente mostra cosa accade se si modifica la chiamata Graphics::FillEllipse nel codice precedente a graphics.FillRectangle(&pthGrBrush, 0, 10, 200, 40).

Specifica di punti sul limite

Nell'esempio seguente viene creato un pennello sfumatura percorso da un percorso star forma. Il codice chiama il metodo PathGradientBrush::SetCenterColor per impostare il colore al centroid del star su rosso. Il codice chiama quindi il metodo PathGradientBrush::SetSurroundColors per specificare vari colori (archiviati nella matrice di colori) nei singoli punti della matrice di punti. L'istruzione di codice finale riempie il percorso star con il pennello sfumatura del percorso.

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

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

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

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

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

int count = 10;
pthGrBrush.SetSurroundColors(colors, &count);

// Fill the path with the path gradient brush.
graphics.FillPath(&pthGrBrush, &path);

La figura seguente mostra la star compilata.

Nell'esempio seguente viene creato un pennello sfumatura percorso in base a una matrice di punti. Un colore viene assegnato a ognuno dei cinque punti della matrice. Se si desidera connettere i cinque punti in base alle linee dritte, si otterrebbe un poligono a cinque lati. Un colore viene assegnato anche al centro (centroid) del poligono , in questo esempio il centro (80, 75) è impostato su bianco. L'istruzione di codice finale nell'esempio riempie un rettangolo con il pennello sfumatura del percorso.

Il colore usato per riempire il rettangolo è bianco a (80, 75) e cambia gradualmente mentre si passa da (80, 75) verso i punti della matrice. Ad esempio, quando si passa da (80, 75) a (0, 0, 0), il colore cambia gradualmente dal bianco al rosso e quando si passa da (80, 75) a (160, 0), il colore cambia gradualmente dal bianco al verde.

// Construct a path gradient brush based on an array of points.
PointF ptsF[] = {PointF(0.0f, 0.0f), 
                 PointF(160.0f, 0.0f), 
                 PointF(160.0f, 200.0f),
                 PointF(80.0f, 150.0f),
                 PointF(0.0f, 200.0f)};

PathGradientBrush pBrush(ptsF, 5);

// 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(255, 255, 0, 0),  // (0, 0) red
                  Color(255, 0, 255, 0),  // (160, 0) green
                  Color(255, 0, 255, 0),  // (160, 200) green
                  Color(255, 0, 0, 255),  // (80, 150) blue
                  Color(255, 255, 0, 0)}; // (0, 200) red

int count = 5;
pBrush.SetSurroundColors(colors, &count);

// Set the center color to white.
pBrush.SetCenterColor(Color(255, 255, 255, 255));

// Use the path gradient brush to fill a rectangle.
graphics.FillRectangle(&pBrush, Rect(0, 0, 180, 220));

Si noti che non esiste alcun oggetto GraphicsPath nel codice precedente. Il particolare costruttore PathGradientBrush nell'esempio riceve un puntatore a una matrice di punti, ma non richiede un oggetto GraphicsPath . Si noti inoltre che il pennello sfumatura percorso viene usato per riempire un rettangolo, non un percorso. Il rettangolo è più grande del percorso usato per definire il pennello, quindi alcuni dei rettangoli non vengono dipinti dal pennello. La figura seguente mostra il rettangolo (linea tratteggiata) e la parte del rettangolo dipinto dal pennello sfumatura del percorso.

Personalizzazione di una sfumatura di percorso

Un modo per personalizzare un pennello sfumatura percorso consiste nel impostare le scale dello stato attivo. Le scalabilità dello stato attivo specificano un percorso interno che si trova all'interno del percorso principale. Il colore centrale viene visualizzato ovunque all'interno del percorso interno anziché solo al punto centrale. Per impostare le scalabilità dello stato attivo di un pennello sfumatura percorso, chiamare il metodo PathGradientBrush::SetFocusScales .

Nell'esempio seguente viene creato un pennello sfumatura percorso in base a un percorso ellittico. Il codice imposta il colore limite su blu, imposta il colore centrale su aqua e quindi usa il pennello sfumatura del percorso per riempire il percorso ellittico.

Successivamente, il codice imposta le scalabilità dello stato attivo del pennello sfumatura del percorso. La scala dello stato attivo x è impostata su 0,3 e la scala dello stato attivo y è impostata su 0,8. Il codice chiama il metodo Graphics::TranslateTransform di un oggetto Graphics in modo che la chiamata successiva a Graphics:: FillPath riempia un ellisse che si trova a destra del primo ellisse.

Per vedere l'effetto delle scale dello stato attivo, immaginare un piccolo ellisse che condivide il suo centro con i puntini di sospensione principali. I puntini di sospensione piccoli (interni) sono i puntini di sospensione principali scalati (circa il suo centro) orizzontalmente da un fattore pari a 0,3 e verticalmente da un fattore pari a 0,8. Quando si passa dal limite dei puntini di sospensione esterni al limite dell'ellisse interna, il colore cambia gradualmente dal blu all'acqua. Quando si passa dal limite dell'ellisse interna al centro condiviso, il colore rimane aqua.

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

// Create a path gradient brush based on the elliptical path.
PathGradientBrush pthGrBrush(&path);
pthGrBrush.SetGammaCorrection(TRUE);

// Set the color along the entire boundary to blue.
Color color(Color(255, 0, 0, 255));
INT num = 1;
pthGrBrush.SetSurroundColors(&color, &num);

// Set the center color to aqua.
pthGrBrush.SetCenterColor(Color(255, 0, 255, 255));
 
// Use the path gradient brush to fill the ellipse. 
graphics.FillPath(&pthGrBrush, &path);

// Set the focus scales for the path gradient brush.
pthGrBrush.SetFocusScales(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.
graphics.TranslateTransform(220.0f, 0.0f);
graphics.FillPath(&pthGrBrush, &path);

La figura seguente mostra l'output del codice precedente. I puntini di sospensione a sinistra sono aqua solo al punto centrale. I puntini di sospensione a destra sono acqua ovunque all'interno del percorso interno.

Un altro modo per personalizzare un pennello sfumatura percorso consiste nel specificare una matrice di colori predefiniti e una matrice di posizioni di interpolazione.

Nell'esempio seguente viene creato un pennello sfumatura percorso in base a un triangolo. Il codice chiama il metodo PathGradientBrush::SetInterpolationColors del pennello sfumatura del percorso per specificare una matrice di colori di interpolazione (verde scuro, aqua, blu) e una matrice di posizioni di interpolazione (0, 0,25, 1). Quando si passa dal limite del triangolo al punto centrale, il colore cambia gradualmente dal verde scuro all'acqua e poi dall'acqua al blu. Il cambiamento dal verde scuro all'acqua avviene nel 25% della distanza dal verde scuro al blu.

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

// No GraphicsPath object is created. The PathGradient
// brush is constructed directly from the array of points.
PathGradientBrush pthGrBrush(points, 3);

Color presetColors[] = {
   Color(255, 0, 128, 0),    // Dark green
   Color(255, 0, 255, 255),  // Aqua
   Color(255, 0, 0, 255)};   // Blue

REAL interpPositions[] = {
   0.0f,   // Dark green is at the boundary of the triangle.
   0.25f,  // Aqua is 25 percent of the way from the boundary
           // to the center point.
   1.0f};  // Blue is at the center point.
                  
pthGrBrush.SetInterpolationColors(presetColors, interpPositions, 3);

// 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.
graphics.FillRectangle(&pthGrBrush, 0, 0, 200, 200);

La figura seguente mostra l'output del codice precedente.

Impostazione del punto centrale

Per impostazione predefinita, il punto centrale di un pennello sfumatura percorso si trova al centroid del percorso usato per costruire il pennello. È possibile modificare la posizione del punto centrale chiamando il metodo PathGradientBrush::SetCenterPoint della classe PathGradientBrush .

Nell'esempio seguente viene creato un pennello sfumatura percorso basato su un'ellisse. Il centro dei puntini di sospensione è a (70, 35), ma il punto centrale del pennello sfumatura del percorso è impostato su (120, 40).

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

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

// Set the center point to a location that is not the centroid of the path.
pthGrBrush.SetCenterPoint(Point(120, 40));

// Set the color at the center point to blue.
pthGrBrush.SetCenterColor(Color(255, 0, 0, 255));

// Set the color along the entire boundary of the path to aqua.
Color colors[] = {Color(255, 0, 255, 255)};
int count = 1;
pthGrBrush.SetSurroundColors(colors, &count);

graphics.FillEllipse(&pthGrBrush, 0, 0, 140, 70);

La figura seguente mostra i puntini di sospensione riempiti e il punto centrale del pennello sfumatura del percorso.

È possibile impostare il punto centrale di un pennello sfumatura percorso su una posizione esterna al percorso usato per costruire il pennello. Nel codice precedente, se si sostituisce la chiamata a PathGradientBrush::SetCenterPoint con pthGrBrush.SetCenterPoint(Point(145, 35)), si otterrà il risultato seguente.

Nella figura precedente, i punti a destra dei puntini di sospensione non sono blu puro (anche se sono molto vicini). I colori della sfumatura sono posizionati come se il riempimento fosse stato consentito per raggiungere il punto (145, 35), il colore avrebbe raggiunto il blu puro (0, 0, 255). Ma il riempimento non raggiunge mai (145, 35) perché un pennello sfumatura percorso disegna solo all'interno del suo percorso.