Gör så här: Skapa en linjegradient

Med klassen PathGradientBrush kan du anpassa hur du fyller en form med gradvis växlande färger. Du kan till exempel ange en färg i mitten av en sökväg och en annan färg för en sökvägs gräns. Du kan också ange separata färger för var och en av flera punkter längs en sökvägs gräns.

Anmärkning

I GDI+ är en sökväg en sekvens med linjer och kurvor som underhålls av ett GraphicsPath objekt. Mer information om GDI+ sökvägar finns i Grafiksökvägar i GDI+ och Konstruera och rita sökvägar.

Exemplen i den här artikeln är metoder som anropas från en kontrolls Paint händelsehanterare.

Så här fyller du en ellips med en sökvägstoning

I följande exempel fylls en ellips med en stiggradientborste. Mittenfärgen är inställd på blå och gränsfärgen är inställd på aqua. Följande bild visar den fyllda ellipsen.

toningssökväg fyller en ellips.

Som standardinställning sträcker sig inte en sökvägsgardinborste utanför sökvägens gräns. Om du använder stiggradientborsten för att fylla en figur som sträcker sig utanför stigens gräns fylls inte området utanför stigen på skärmen.

Följande bild visar vad som händer om du ändrar Graphics.FillEllipse-anropet i följande kod till e.Graphics.FillRectangle(pthGrBrush, 0, 10, 200, 40):

Toningskurva sträcker sig utanför sökvägens gräns.

public void FillEllipseWithPathGradient(PaintEventArgs e)
{
    // 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)

Föregående kodexempel är utformat för användning med Windows Forms och kräver PaintEventArgs e, vilket är en parameter för PaintEventHandler.

Så här anger du punkter på gränsen

I följande exempel skapas en lutningsborste för sökväg från en stjärnformad sökväg. Koden anger egenskapen CenterColor, som anger färgen på stjärnans centroid till röd. Sedan anger koden egenskapen SurroundColors för att ange olika färger (lagrade i colors-matrisen) vid de enskilda punkterna i points matrisen. Den sista kodsatsen fyller den stjärnformade stigen med en gradientborste.

public void ConstructBrushFromStarShapedPath(PaintEventArgs e)
{
    // 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)

I följande exempel ritas en väggradient utan ett GraphicsPath-objekt i koden. Den specifika PathGradientBrush konstruktorn i exemplet tar emot en matris med punkter men kräver inte ett GraphicsPath objekt. Observera också att PathGradientBrush används för att fylla en rektangel, inte en sökväg. Rektangeln är större än den stängda sökvägen som används för att definiera penseln, så en del av rektangeln är inte målad av penseln. Följande illustration visar rektangeln (prickad linje) och den del av rektangeln som är målad med banans gradientpensel.

Toningsdel som målats av gradientpenseln.

public void DrawPathGradentWthoutGraphicsPath(PaintEventArgs e)
{
    // 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))

Anpassa en sökvägsövertoning

Ett sätt att anpassa en linjär toningspensel är att ange dess egenskap FocusScales. Fokusskalorna anger en inre sökväg som ligger inuti huvudsökvägen. Mittenfärgen visas överallt inuti den inre banan snarare än endast vid mittpunkten.

I följande exempel skapas en kanalgradientpensel baserad på en elliptisk bana. Koden anger gränsfärgen till blått, ställer in mittenfärgen till aqua och använder sedan sökvägens gradientborste för att fylla i den elliptiska banan.

Därefter anger koden fokusskalorna för sökvägstoningspenseln. X-fokusskalan är inställd på 0,3 och y-fokusskalan är inställd på 0,8. Koden anropar TranslateTransform-metoden för ett Graphics-objekt så att det efterföljande anropet till FillPath fyller en ellips som sitter till höger om den första ellipsen.

Om du vill se effekten av fokusskalorna kan du tänka dig en liten ellips som delar dess centrum med huvudellipsen. Den lilla (inre) ellipsen är den huvudsakliga ellipsen som skalas (ungefär i mitten) horisontellt med en faktor 0,3 och vertikalt med en faktor på 0,8. När du flyttar från gränsen för den yttre ellipsen till gränsen för den inre ellipsen ändras färgen gradvis från blått till aqua. När du flyttar från gränsen för den inre ellipsen till det delade centret förblir färgen aqua.

Följande bild visar utdata från följande kod. Ellipsen till vänster är bara akvamarin på mittpunkten. Ellipsen till höger är turkos överallt inuti den inre banan.

Gradient-effekten av fokusskalans

public void CustomizePathGradientBrush(PaintEventArgs e)
{
    // 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)

Anpassa med hjälp av interpolering

Ett annat sätt att anpassa en sökvägstoningspensel är att ange en vektor med interpolationsfärger och en vektor med interpoleringspositioner.

I följande exempel skapas en gradientborste för bana baserat på en triangel. Koden ställer in InterpolationColors-egenskapen för penseln för färgtoning av sökväg för att specificera en matris av interpolationsfärger (mörkgrön, aqua, blå) och en matris av interpolationspositioner (0, 0,25, 1). När du flyttar från triangelns gräns till mittpunkten ändras färgen gradvis från mörkgrön till aqua och sedan från vatten till blått. Förändringen från mörkgrön till aqua sker i 25 procent av avståndet från mörkgrön till blå.

Följande illustration visar triangeln fylld med den anpassade banans graderingpensel.

triangel fylld med anpassad lutningsborste för sökväg.

public void CustomizeWithInterpolation(PaintEventArgs e)
{
    // 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)

Så här ställer du in mittpunkten

Som standard är mittpunkten för en gradientpensel vid centroiden för den bana som används för att konstruera penseln. Du kan ändra platsen för mittpunkten genom att ange egenskapen CenterPoint för klassen PathGradientBrush.

I följande exempel skapas en gradientpensel för bana baserat på en ellips. Mitten av ellipsen är vid (70, 35), men mittpunkten för linjegradientpenseln är inställd på (120, 40).

public void SetCenterPoint(PaintEventArgs e)
{
    // 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)

Följande bild visar den fyllda ellipsen och mittpunkten av sökvägsgradientpenseln.

gradientsväg med fylld ellips och mittpunkt.

Du kan ställa in mittpunkten för en sökvägstoningsborste till en plats utanför den sökväg som användes för att konstruera borsten. I följande exempel ersätts anropet för att ange egenskapen CenterPoint i föregående kod.

public void SetCenterPointOutsidePath(PaintEventArgs e)
{
    // 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(145, 35);

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

pthGrBrush.CenterPoint = New PointF(145, 35)

Följande bild visar utdata med den här ändringen:

gradientstig med en mittpunkt som ligger utanför stigen.

I föregående bild är punkterna längst till höger i ellipsen inte rena blå (även om de är mycket nära). Färgerna i toningen placeras som om fyllningen nådde punkten (145, 35) där färgen skulle vara ren blå (0, 0, 255). Men fyllningen når aldrig (145, 35) eftersom en väggradientpensel målar endast inuti sin bana.

Kompilera koden

Föregående exempel är utformade för användning med Windows Forms, och de kräver PaintEventArgse, vilket är en parameter för Paint händelsehanterare.

Se även

Använda en gradientpensel för att fylla former

Feedback

Var den här sidan till hjälp?

Last updated on 2025-05-07