Cara: Membuat Gradien Linier

GDI+ menyediakan gradien linier horizontal, vertikal, dan diagonal. Secara default, warna dalam gradien linier berubah seragam. Namun, Anda dapat menyesuaikan gradien linier sehingga warna berubah dengan cara yang tidak seragam.

Nota

Contoh dalam artikel ini adalah metode yang dipanggil dari penanganan aktivitas kontrol Paint .

Contoh berikut mengisi warna pada garis, elips, dan persegi panjang dengan kuas gradien linier horizontal.

LinearGradientBrush Konstruktor menerima empat argumen: dua titik dan dua warna. Poin pertama (0, 10) dikaitkan dengan warna pertama (merah), dan titik kedua (200, 10) dikaitkan dengan warna kedua (biru). Seperti yang Anda harapkan, garis yang ditarik dari (0, 10) hingga (200, 10) berubah secara bertahap dari merah ke biru.

Angka 10-an dalam poin (0, 10) dan (200, 10) tidak penting. Yang penting adalah bahwa dua titik memiliki koordinat kedua yang sama - garis yang menghubungkannya adalah horizontal. Elips dan persegi panjang juga berubah secara bertahap dari merah ke biru saat koordinat horizontal berubah dari 0 ke 200.

Ilustrasi berikut menunjukkan garis, elips, dan persegi panjang. Perhatikan bahwa gradien warna berulang sendiri saat koordinat horizontal meningkat melebihi 200.

Untuk menggunakan gradien linier horizontal

• Teruskan merah buram dan biru buram sebagai argumen ketiga dan keempat, masing-masing.

  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)
  
  

Dalam contoh sebelumnya, komponen warna berubah secara linier saat Anda berpindah dari koordinat horizontal 0 ke koordinat horizontal 200. Misalnya, titik yang koordinat pertamanya setengah antara 0 dan 200 akan memiliki komponen biru yang setengah jalan antara 0 dan 255.

GDI+ memungkinkan Anda menyesuaikan cara warna bervariasi dari satu tepi gradien ke tepi lainnya. Misalkan Anda ingin membuat sikat gradien yang berubah dari hitam ke merah sesuai dengan tabel berikut.

Koordinat horizontal	Komponen RGB
0	(0, 0, 0)
40	(128, 0, 0)
200	(255, 0, 0)

Perhatikan bahwa komponen merah berada pada setengah intensitas ketika koordinat horizontal hanya 20 persen dari jarak dari 0 hingga 200.

Contoh berikut mengatur LinearGradientBrush.Blend properti untuk mengaitkan tiga intensitas relatif dengan tiga posisi relatif. Seperti pada tabel sebelumnya, intensitas relatif 0,5 dikaitkan dengan posisi relatif 0,2. Kode ini mengisi elips dan persegi panjang dengan kuas gradien.

Ilustrasi berikut menunjukkan elips dan persegi panjang yang dihasilkan.

Untuk menyesuaikan gradien linier

• Teruskan hitam buram dan merah buram sebagai argumen ketiga dan keempat, masing-masing.

  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)
  
  

Gradien dalam contoh sebelumnya telah horizontal; artinya, warna berubah secara bertahap saat Anda bergerak di sepanjang garis horizontal apa pun. Anda juga dapat menentukan gradien vertikal dan gradien diagonal.

Contoh berikut meneruskan poin (0, 0) dan (200, 100) ke LinearGradientBrush konstruktor. Warna biru dikaitkan dengan (0, 0), dan warna hijau dikaitkan dengan (200, 100). Garis (dengan lebar pena 10) dan elips diisi menggunakan kuas gradien linier.

Ilustrasi berikut menunjukkan garis dan elips. Perhatikan bahwa warna dalam elips berubah secara bertahap saat Anda bergerak di sepanjang garis apa pun yang sejajar dengan garis yang melewati (0, 0) dan (200, 100).

Untuk membuat gradien linier diagonal

• Masukkan biru buram dan hijau buram sebagai argumen ketiga dan keempat, masing-masing.

  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)
  
  

Lihat juga

• Menggunakan Sikat Gradien untuk Mengisi Bentuk
• Grafis dan Penggambaran di Windows Forms