Procedura: creare una sfumatura percorsoHow to: Create a Path Gradient

La PathGradientBrush classe consente di personalizzare il modo in cui si riempie una forma con gradualmente la modifica dei colori.The PathGradientBrush class allows you to customize the way you fill a shape with gradually changing colors. Ad esempio, è possibile specificare un colore per il centro di un percorso e un altro colore per il limite di un percorso.For example, you can specify one color for the center of a path and another color for the boundary of a path. È anche possibile specificare i colori separati per ognuno dei vari punti lungo il bordo di un percorso.You can also specify separate colors for each of several points along the boundary of a path.

Nota

In GDI+GDI+, un percorso è una sequenza di linee e curve gestita da un GraphicsPath oggetto.In GDI+GDI+, a path is a sequence of lines and curves maintained by a GraphicsPath object. Per ulteriori informazioni su GDI+GDI+ percorsi, vedere percorsi di oggetti Graphics in GDI+ e costruzione e creazione di percorsi.For more information about GDI+GDI+ paths, see Graphics Paths in GDI+ and Constructing and Drawing Paths.

Per compilare un'ellisse con una sfumatura percorsoTo fill an ellipse with a path gradient

  • Nell'esempio seguente inserisce un'ellisse con un pennello a sfumatura.The following example fills an ellipse with a path gradient brush. Colore centrale è impostato su blu e il colore del limite è impostato su verde acqua.The center color is set to blue and the boundary color is set to aqua. Nella figura seguente mostra l'ellisse piena.The following illustration shows the filled ellipse.

    Percorso sfumaturaGradient Path

    Per impostazione predefinita, un pennello a sfumatura non estende oltre i limiti del percorso.By default, a path gradient brush does not extend outside the boundary of the path. Se si utilizza il pennello a sfumatura per riempire una figura che si estende oltre il limite del percorso, l'area dello schermo all'esterno del tracciato non essere compilato.If you use the path gradient brush to fill a figure that extends beyond the boundary of the path, the area of the screen outside the path will not be filled.

    La figura seguente mostra cosa accade se si modifica il FillEllipse nel codice seguente per chiamare e.Graphics.FillRectangle(pthGrBrush, 0, 10, 200, 40).The following illustration shows what happens if you change the FillEllipse call in the following code to e.Graphics.FillRectangle(pthGrBrush, 0, 10, 200, 40).

    Percorso sfumaturaGradient Path

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

    L'esempio di codice precedente è progettato per l'uso con Windows Form e richiede la PaintEventArgs e, un parametro di PaintEventHandler.The preceding code example is designed for use with Windows Forms, and it requires the PaintEventArgs e, which is a parameter of PaintEventHandler.

Per specificare i punti in corrispondenza del limiteTo specify points on the boundary

  • L'esempio seguente crea un pennello a sfumatura percorso da un percorso a forma di stella.The following example constructs a path gradient brush from a star-shaped path. Il codice imposta la CenterColor proprietà, che imposta il colore al centro della stella in rosso.The code sets the CenterColor property, which sets the color at the centroid of the star to red. Il codice imposta quindi la SurroundColors proprietà per specificare colori diversi (archiviati nel colors matrice) in corrispondenza di singoli punti nel points matrice.Then the code sets the SurroundColors property to specify various colors (stored in the colors array) at the individual points in the points array. L'istruzione finale di codice viene compilato il percorso a forma di stella con pennello a sfumatura.The final code statement fills the star-shaped path with the path gradient brush.

    // 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);
    
    
    ' 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)
    
  • Nell'esempio seguente disegna una sfumatura percorso senza un GraphicsPath oggetto nel codice.The following example draws a path gradient without a GraphicsPath object in the code. Il particolare PathGradientBrush costruttore nell'esempio riceve una matrice di punti ma non richiede un GraphicsPath oggetto.The particular PathGradientBrush constructor in the example receives an array of points but does not require a GraphicsPath object. Si noti inoltre che il PathGradientBrush viene utilizzato per riempire un rettangolo, non un percorso.Also, note that the PathGradientBrush is used to fill a rectangle, not a path. Il rettangolo è maggiore del percorso chiuso utilizzato per definire il pennello, pertanto alcuni del rettangolo non viene disegnato dal pennello.The rectangle is larger than the closed path used to define the brush, so some of the rectangle is not painted by the brush. Nella figura seguente viene illustrato il rettangolo (linea tratteggiata) e la parte del rettangolo disegnato usando pennello a sfumatura.The following illustration shows the rectangle (dotted line) and the portion of the rectangle painted by the path gradient brush.

    SfumaturaGradient

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

Per personalizzare una sfumatura percorsoTo customize a path gradient

  • È possibile personalizzare un pennello sfumatura percorso consiste nell'impostare il relativo FocusScales proprietà.One way to customize a path gradient brush is to set its FocusScales property. Le scale lo stato attivo per specificano un percorso interno che si trova all'interno del percorso principale.The focus scales specify an inner path that lies inside the main path. Colore centrale viene visualizzato ovunque all'interno di tale percorso interno anziché solo nel punto centrale.The center color is displayed everywhere inside that inner path rather than only at the center point.

    Nell'esempio seguente viene creato un pennello a sfumatura percorso in base a un percorso ellittico.The following example creates a path gradient brush based on an elliptical path. Il codice imposta il colore di contorno impostandolo sul blu, imposta il colore centrale azzurro e quindi utilizza il pennello a sfumatura per riempire il percorso ellittico.The code sets the boundary color to blue, sets the center color to aqua, and then uses the path gradient brush to fill the elliptical path.

    Successivamente, il codice imposta le scale lo stato attivo del pennello a sfumatura percorso.Next, the code sets the focus scales of the path gradient brush. La scala di x lo stato attivo è impostata su 0,3, e la dimensione y è impostata su 0,8.The x focus scale is set to 0.3, and the y focus scale is set to 0.8. Il codice chiama il TranslateTransform metodo di un Graphics oggetto in modo che la successiva chiamata a FillPath riempie un'ellisse che si trova a destra della prima ellisse.The code calls the TranslateTransform method of a Graphics object so that the subsequent call to FillPath fills an ellipse that sits to the right of the first ellipse.

    Per visualizzare l'effetto delle scale lo stato attivo, si immagini una piccola ellisse che condivide il centro con i puntini di sospensione principale.To see the effect of the focus scales, imagine a small ellipse that shares its center with the main ellipse. Piccola ellisse (interna) è l'ellisse principale scalata orizzontalmente (rispetto al centro) di un fattore di 0,3 e in verticale di un fattore pari a 0,8.The small (inner) ellipse is the main ellipse scaled (about its center) horizontally by a factor of 0.3 and vertically by a factor of 0.8. Quando si sposta dal limite dell'ellisse esterno ai limiti dell'ellisse interna, il colore cambia gradualmente da blu ad azzurro.As you move from the boundary of the outer ellipse to the boundary of the inner ellipse, the color changes gradually from blue to aqua. Quando si sposta dal limite dell'ellisse interna al centro condiviso, il colore rimane azzurro.As you move from the boundary of the inner ellipse to the shared center, the color remains aqua.

    L'immagine seguente illustra l'output del codice riportato di seguito.The following illustration shows the output of the following code. I puntini di sospensione a sinistra è azzurra solo nel punto centrale.The ellipse on the left is aqua only at the center point. I puntini di sospensione a destra è azzurra ovunque all'interno del percorso interno.The ellipse on the right is aqua everywhere inside the inner path.

SfumaturaGradient

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

Per personalizzare mediante interpolazioneTo customize with interpolation

  • È inoltre possibile personalizzare un pennello a sfumatura percorso consiste nello specificare una matrice di colori di interpolazione e una matrice di posizioni di interpolazione.Another way to customize a path gradient brush is to specify an array of interpolation colors and an array of interpolation positions.

    Nell'esempio seguente viene creato un pennello a sfumatura percorso basato su un triangolo.The following example creates a path gradient brush based on a triangle. Il codice imposta la InterpolationColors proprietà del pennello a sfumatura percorso per specificare una matrice di colori di interpolazione (azzurro verde scuro, blu) e una matrice di posizioni di interpolazione (0, 0.25, 1).The code sets the InterpolationColors property of the path gradient brush to specify an array of interpolation colors (dark green, aqua, blue) and an array of interpolation positions (0, 0.25, 1). Quando si sposta dal limite del triangolo verso il centro, il colore cambia gradualmente da verde a azzurro e quindi da azzurro a blu.As you move from the boundary of the triangle to the center point, the color changes gradually from dark green to aqua and then from aqua to blue. La modifica da verde a azzurro avviene al 25% della distanza tra verde e blu.The change from dark green to aqua happens in 25 percent of the distance from dark green to blue.

    Nella figura seguente viene illustrato il triangolo riempito con pennello a sfumatura percorso personalizzato.The following illustration shows the triangle filled with the custom path gradient brush.

    Percorso sfumaturaGradient Path

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

Per impostare il punto centraleTo set the center point

  • Per impostazione predefinita, il punto centrale di un pennello a sfumatura è al centro del percorso utilizzato per costruire il pennello.By default, the center point of a path gradient brush is at the centroid of the path used to construct the brush. È possibile modificare il percorso del punto centrale mediante l'impostazione di CenterPoint proprietà la PathGradientBrush classe.You can change the location of the center point by setting the CenterPoint property of the PathGradientBrush class.

    Nell'esempio seguente viene creato un pennello a sfumatura percorso basato su un'ellisse.The following example creates a path gradient brush based on an ellipse. Trova il centro dell'ellisse (70, 35), ma il punto centrale di pennello a sfumatura è impostato su (120, 40).The center of the ellipse is at (70, 35), but the center point of the path gradient brush is set to (120, 40).

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

    Nella figura seguente mostra l'ellisse piena e il punto centrale di pennello a sfumatura.The following illustration shows the filled ellipse and the center point of the path gradient brush.

    Percorso sfumaturaGradient Path

  • È possibile impostare il punto centrale di un pennello a sfumatura in una posizione all'esterno del percorso utilizzato per costruire il pennello.You can set the center point of a path gradient brush to a location outside the path that was used to construct the brush. Nell'esempio seguente sostituisce la chiamata per impostare il CenterPoint proprietà nel codice precedente.The following example replaces the call to set the CenterPoint property in the preceding code.

    pthGrBrush.CenterPoint = new PointF(145, 35);
    
    pthGrBrush.CenterPoint = New PointF(145, 35)
    

    Nella figura seguente mostra l'output con questa modifica.The following illustration shows the output with this change.

    Percorso sfumaturaGradient Path

    Nell'illustrazione precedente, i punti all'estrema destra dell'ellisse non sono perfettamente blu (anche se sono molto simili).In the preceding illustration, the points at the far right of the ellipse are not pure blue (although they are very close). I colori della sfumatura vengono posizionati come se il riempimento raggiunto il punto (145, 35) in cui il colore sarebbe perfettamente blu (0, 0, 255).The colors in the gradient are positioned as if the fill reached the point (145, 35) where the color would be pure blue (0, 0, 255). Ma non raggiunge mai il riempimento (145, 35) perché un pennello a sfumatura percorso consente di disegnare solo all'interno di percorso.But the fill never reaches (145, 35) because a path gradient brush paints only inside its path.

Compilazione del codiceCompiling the Code

Negli esempi precedenti sono progettati per l'uso con Windows Form e richiedono PaintEventArgs e, ovvero un parametro del Paint gestore dell'evento.The preceding examples are designed for use with Windows Forms, and they require PaintEventArgs e, which is a parameter of the Paint event handler.

Vedere ancheSee Also

Uso di un pennello a sfumatura per il riempimento di formeUsing a Gradient Brush to Fill Shapes