Udostępnij za pośrednictwem

Instrukcje: tworzenie gradientu liniowego

  • Artykuł

GDI+ zapewnia gradienty liniowe poziome, pionowe i ukośne. Domyślnie kolor gradientu liniowego zmienia się równomiernie. Można jednak dostosować gradient liniowy, tak aby kolor zmieniał się w sposób nierównomierny.

Notatka

Przykłady w tym artykule to metody wywoływane z programu obsługi zdarzeń Paint kontrolki.

Poniższy przykład wypełnia linię, elipsę i prostokąt przy użyciu poziomego liniowego pędzla gradientowego.

Konstruktor LinearGradientBrush otrzymuje cztery argumenty: dwa punkty i dwa kolory. Pierwszy punkt (0, 10) jest skojarzony z pierwszym kolorem (czerwony), a drugi punkt (200, 10) jest skojarzony z drugim kolorem (niebieski). Jak można się spodziewać, linia narysowana od (0, 10) do (200, 10) zmienia się stopniowo z czerwonego na niebieski.

Liczby 10 w punktach (0, 10) i (200, 10) nie są istotne. Ważne jest, aby dwa punkty miały tę samą drugą współrzędną — linia łącząca je jest pozioma. Elipsa i prostokąt również zmieniają się stopniowo z czerwonego na niebieski, gdy współrzędna pozioma przechodzi od 0 do 200.

Poniższa ilustracja przedstawia linię, wielokropek i prostokąt. Należy pamiętać, że gradient koloru powtarza się w miarę wzrostu współrzędnych poziomych powyżej 200.

linii, wielokropka i prostokąta wypełnionego gradientem kolorów.

Aby użyć gradientów liniowych poziomych

  • Podaj nieprzezroczysty czerwony i nieprzezroczysty niebieski jako odpowiednio trzeci i czwarty argument.

    public void UseHorizontalLinearGradients(PaintEventArgs e)
{
    LinearGradientBrush linGrBrush = new LinearGradientBrush(
       new Point(0, 10),
       new Point(200, 10),
       Color.FromArgb(255, 255, 0, 0),   // Opaque red
       Color.FromArgb(255, 0, 0, 255));  // Opaque blue

    Pen pen = new Pen(linGrBrush);

    e.Graphics.DrawLine(pen, 0, 10, 200, 10);
    e.Graphics.FillEllipse(linGrBrush, 0, 30, 200, 100);
    e.Graphics.FillRectangle(linGrBrush, 0, 155, 500, 30);
}

    Dim linGrBrush As New LinearGradientBrush( _
   New Point(0, 10), _
   New Point(200, 10), _
   Color.FromArgb(255, 255, 0, 0), _
   Color.FromArgb(255, 0, 0, 255))
Dim pen As New Pen(linGrBrush)

e.Graphics.DrawLine(pen, 0, 10, 200, 10)
e.Graphics.FillEllipse(linGrBrush, 0, 30, 200, 100)
e.Graphics.FillRectangle(linGrBrush, 0, 155, 500, 30)

W poprzednim przykładzie składniki kolorów zmieniają się liniowo w miarę przechodzenia ze współrzędnej poziomej 0 do współrzędnej poziomej 200. Na przykład punkt, którego pierwsza współrzędna znajduje się w połowie zakresu od 0 do 200, będzie miał niebieski składnik, który znajduje się w połowie zakresu od 0 do 255.

GDI+ umożliwia dostosowanie sposobu, w jaki kolor różni się od jednej krawędzi gradientu do drugiej. Załóżmy, że chcesz utworzyć pędzel gradientowy, który przechodzi z czarnego na czerwony zgodnie z poniższą tabelą.

Współrzędna pozioma Składniki RGB
0 (0, 0, 0)
40 (128, 0, 0)
200 (255, 0, 0)

Należy pamiętać, że czerwony składnik jest w połowie intensywności, gdy współrzędna pozioma wynosi tylko 20 procent drogi od 0 do 200.

Poniższy przykład ustawia właściwość LinearGradientBrush.Blend, aby przypisać trzy względne intensywności do trzech względnych pozycji. Podobnie jak w poprzedniej tabeli, względna intensywność 0,5 jest skojarzona ze względną pozycją 0,2. Kod wypełnia wielokropek i prostokąt pędzlem gradientowym.

Na poniższej ilustracji przedstawiono wynikowy wielokropek i prostokąt.

Elipsa i prostokąt wypełnione poziomym gradientem kolorów.

Aby dostosować gradienty liniowe

  • Przekaż nieprzezroczysty czarny i nieprzezroczysty czerwony jako odpowiednio trzeci i czwarty argument.

    public void CustomizeLinearGradients(PaintEventArgs e)
{
    LinearGradientBrush linGrBrush = new LinearGradientBrush(
       new Point(0, 10),
       new Point(200, 10),
       Color.FromArgb(255, 0, 0, 0),     // Opaque black
       Color.FromArgb(255, 255, 0, 0));  // Opaque red

    float[] relativeIntensities = { 0.0f, 0.5f, 1.0f };
    float[] relativePositions = { 0.0f, 0.2f, 1.0f };

    //Create a Blend object and assign it to linGrBrush.
    Blend blend = new Blend();
    blend.Factors = relativeIntensities;
    blend.Positions = relativePositions;
    linGrBrush.Blend = blend;

    e.Graphics.FillEllipse(linGrBrush, 0, 30, 200, 100);
    e.Graphics.FillRectangle(linGrBrush, 0, 155, 500, 30);
}

    Dim linGrBrush As New LinearGradientBrush( _
   New Point(0, 10), _
   New Point(200, 10), _
   Color.FromArgb(255, 0, 0, 0), _
   Color.FromArgb(255, 255, 0, 0))

Dim relativeIntensities As Single() = {0.0F, 0.5F, 1.0F}
Dim relativePositions As Single() = {0.0F, 0.2F, 1.0F}

'Create a Blend object and assign it to linGrBrush.
Dim blend As New Blend()
blend.Factors = relativeIntensities
blend.Positions = relativePositions
linGrBrush.Blend = blend

e.Graphics.FillEllipse(linGrBrush, 0, 30, 200, 100)
e.Graphics.FillRectangle(linGrBrush, 0, 155, 500, 30)

Gradienty w poprzednich przykładach były poziome; oznacza to, że kolor zmienia się stopniowo w miarę przechodzenia wzdłuż dowolnej linii poziomej. Można również zdefiniować gradienty pionowe i gradienty ukośne.

Poniższy przykład przekazuje punkty (0, 0) i (200, 100) do konstruktora LinearGradientBrush. Kolor niebieski jest skojarzony z (0, 0), a kolor zielony jest skojarzony z (200, 100). Linia (o szerokości rysika 10) i elipsa są wypełnione pędzlem gradientu liniowego.

Poniższa ilustracja przedstawia linię i wielokropek. Należy pamiętać, że kolor wielokropka zmienia się stopniowo w miarę przechodzenia wzdłuż dowolnej linii równoległej do linii przechodzącej przez (0, 0) i (200, 100).

Linia i elipsa wypełniona gradientem koloru ukośnego.

Aby utworzyć gradienty liniowe po przekątnej

  • Przekaż nieprzezroczysty niebieski i nieprzezroczysty zielony jako trzeci i czwarty argument, odpowiednio.

    public void CreateDiagonalLinearGradients(PaintEventArgs e)
{
    LinearGradientBrush linGrBrush = new LinearGradientBrush(
       new Point(0, 0),
       new Point(200, 100),
       Color.FromArgb(255, 0, 0, 255),   // opaque blue
       Color.FromArgb(255, 0, 255, 0));  // opaque green

    Pen pen = new Pen(linGrBrush, 10);

    e.Graphics.DrawLine(pen, 0, 0, 600, 300);
    e.Graphics.FillEllipse(linGrBrush, 10, 100, 200, 100);
}

    Dim linGrBrush As New LinearGradientBrush( _
   New Point(0, 0), _
   New Point(200, 100), _
   Color.FromArgb(255, 0, 0, 255), _
   Color.FromArgb(255, 0, 255, 0))
' opaque blue
' opaque green
Dim pen As New Pen(linGrBrush, 10)

e.Graphics.DrawLine(pen, 0, 0, 600, 300)
e.Graphics.FillEllipse(linGrBrush, 10, 100, 200, 100)

Zobacz też