Postupy: Vytvoření přechodu cesty

Článek
10/18/2023

Třída PathGradientBrush umožňuje přizpůsobit způsob, jakým vyplníte obrazec postupným změnou barev. Můžete například zadat jednu barvu pro střed cesty a jinou barvu pro hranici cesty. Můžete také zadat samostatné barvy pro každý z několika bodů podél hranice cesty.

Poznámka:

V GDI+ je cesta posloupnost čar a křivek udržovaných objektem GraphicsPath . Další informace o cestách GDI+ naleznete v tématu Grafické cesty v GDI+ a vytváření a kreslení cest.

Příklady v tomto článku jsou metody, které se volají z obslužné rutiny Paint události ovládacího prvku.

Vyplnění tří teček přechodem cesty

Následující příklad vyplní tři tečky štětcem přechodu cesty. Středová barva je nastavená na modrou a okrajová barva je nastavená na aqua. Následující obrázek znázorňuje vyplněné tři tečky.

Gradient Path fills an ellipse.

Ve výchozím nastavení se štětec přechodu cesty nerozprostírá mimo hranice cesty. Pokud použijete štětec přechodu cesty k vyplnění obrázku, který přesahuje hranice cesty, oblast obrazovky mimo cestu nebude vyplněna.

Následující obrázek ukazuje, co se stane, když změníte Graphics.FillEllipse volání v následujícím kódu na e.Graphics.FillRectangle(pthGrBrush, 0, 10, 200, 40):

Gradient Path extended beyond boundary of the path.

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)

Předchozí příklad kódu je určen pro použití s model Windows Forms a vyžaduje PaintEventArgs e, což je parametr PaintEventHandler.

Určení bodů na hranici

Následující příklad vytvoří přechodový štětec cesty z cesty ve tvaru hvězdy. Kód nastaví CenterColor vlastnost, která nastaví barvu na centroid hvězdy na červenou. Pak kód nastaví SurroundColors vlastnost pro určení různých barev (uložených v colors poli) na jednotlivých bodech pole points . Poslední příkaz kódu vyplní cestu ve tvaru hvězdičky štětcem přechodu cesty.

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)

Následující příklad nakreslí přechod cesty bez GraphicsPath objektu v kódu. Konkrétní PathGradientBrush konstruktor v příkladu obdrží pole bodů, ale nevyžaduje GraphicsPath objekt. Všimněte si také, že PathGradientBrush se používá k vyplnění obdélníku, nikoli cesty. Obdélník je větší než uzavřená cesta použitá k definování štětce, takže některé obdélníky nejsou malovány štětcem. Následující obrázek znázorňuje obdélník (tečkovanou čáru) a část obdélníku malovanou štětcem přechodu cesty:

Gradient portion painted by the path gradient brush.

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))

Přizpůsobení přechodu cesty

Jedním ze způsobů, jak přizpůsobit štětec přechodu cesty, je nastavit jeho FocusScales vlastnost. Fokus škáluje vnitřní cestu, která leží uvnitř hlavní cesty. Středová barva se zobrazí všude uvnitř této vnitřní cesty, nikoli pouze ve středu.

Následující příklad vytvoří štětec přechodu cesty založený na eliptické cestě. Kód nastaví barvu ohraničení na modrou, nastaví středovou barvu na akvaristu a pak pomocí štětce přechodu cesty vyplní eliptickou cestu.

V dalším kroku kód nastaví měřítka fokusu přechodového štětce cesty. Měřítko x fokusu je nastaveno na 0,3 a měřítko fokusu y je nastaveno na 0,8. Kód volá metodu objektu TranslateTransform Graphics tak, aby následné volání vyplnit FillPath tři tečky, která je umístěna napravo od první tři tečky.

Pokud chcete vidět efekt měřítka fokusu, představte si malé tři tečky, které sdílí jeho střed s hlavním třemi tečkami. Malá (vnitřní) elipsa je hlavní tři tečky škálovaná (o jeho středu) vodorovně faktorem 0,3 a svisle faktorem 0,8. Když se pohybujete od hranice vnějšího elipsy na hranici vnitřního elipsy, barva se postupně mění z modré na aqua. Když se pohybujete od hranice vnitřního elipsy do sdíleného středu, barva zůstává aqua.

Následující obrázek znázorňuje výstup následujícího kódu. Elipsa vlevo je aqua pouze ve středu. Elipsa na pravé straně je aqua všude uvnitř vnitřní cesty.

Gradient effect of focus scales

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)

Přizpůsobení pomocí interpolace

Dalším způsobem přizpůsobení štětce přechodu cesty je určení pole interpolačních barev a pole interpolačních pozic.

Následující příklad vytvoří přechodový štětec cesty založený na trojúhelníku. Kód nastaví InterpolationColors vlastnost štětce přechodu cesty k určení pole interpolačních barev (tmavě zelená, aqua, modrá) a pole interpolačních pozic (0, 0,25, 1). Při přechodu z hranice trojúhelníku na středový bod se barva postupně mění z tmavě zelené na aqua a pak z aqua na modrou. Změna z tmavě zelené na aqua probíhá v 25 procentech vzdálenosti od tmavě zelené na modrou.

Následující obrázek znázorňuje trojúhelník vyplněný štětcem přechodu vlastní cesty.

Triangle filled with custom path gradient brush.

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)

Nastavení středového bodu

Ve výchozím nastavení je středový bod štětce přechodu cesty na centroid cesty použitý k vytvoření štětce. Umístění středového bodu můžete změnit nastavením CenterPoint vlastnosti PathGradientBrush třídy.

Následující příklad vytvoří přechodový štětec cesty na základě tří teček. Střed tří teček je na (70, 35), ale střed štětce přechodu cesty je nastaven na (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)

Následující obrázek znázorňuje vyplněné tři tečky a středový bod štětce přechodu cesty:

Gradient Path with filled ellipse and center point.

Středový bod štětce přechodu cesty můžete nastavit na umístění mimo cestu, která byla použita k vytvoření štětce. Následující příklad nahrazuje volání nastavit CenterPoint vlastnost v předchozím kódu.

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)

Následující obrázek znázorňuje výstup s touto změnou:

Gradient Path with center point outside the path.

Na předchozím obrázku nejsou body úplně vpravo od tří teček modré (i když jsou velmi blízko). Barvy v přechodu se umístí tak, jako kdyby výplň dosáhla bodu (145, 35), kde barva by byla čistá modrá (0, 0, 255). Výplň ale nikdy nedosáhne (145, 35), protože přechodový štětec cesty maluje pouze uvnitř své cesty.

Probíhá kompilace kódu

Předchozí příklady jsou navrženy pro použití s model Windows Forms a vyžadují PaintEventArgse, což je parametr Paint obslužné rutiny události.

Viz také

Použití štětce přechodu k vyplnění obrazců

Sdílet prostřednictvím