Porady: tworzenie gradientu liniowego

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 nieujemny.

Uwaga

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

Poniższy przykład wypełnia linię, wielokropek i prostokąt za pomocą poziomego pędzla gradientu liniowego.

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 pobrana z (0, 10) do (200, 10) zmienia się stopniowo z czerwonego na niebieski.

10 punktów (0, 10) i (200, 10) nie są ważne. Ważne jest, aby dwa punkty miały tę samą drugą współrzędną — linia łącząca je jest pozioma. Wielokropek i prostokąt również zmieniają się stopniowo z czerwonego na niebieski, ponieważ współrzędna pozioma przechodzi z zakresu 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.

Aby użyć gradientów liniowych poziomych

• Przekaż nieprzezroczystym czerwonym i nieprzezroczystym niebieskim 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ć szczotkę gradientową, która zmienia się z czarnej na czerwoną 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 LinearGradientBrush.Blend właściwość, aby skojarzyć trzy względne wzrosty z trzema względnymi pozycjami. 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.

Aby dostosować gradienty liniowe

• Przekaż nieprzezroczyste czarne i nieprzezroczyste czerwone 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 do konstruktora LinearGradientBrush punkty (0, 0) i (200, 100). Kolor niebieski jest skojarzony z (0, 0), a kolor zielony jest skojarzony z (200, 100). Linia (o szerokości pióra 10) i wielokropek 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).

Aby utworzyć gradienty liniowe po przekątnej

• Przekaż nieprzezroczystym niebieskim i nieprzezroczystym zielonym jako odpowiednio trzeci i czwarty argument.

  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ż

• Używanie pędzla gradientów do wypełniania kształtów
• Grafika i rysowanie w formularzach Windows Forms