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.
Catatan
Contoh dalam artikel ini adalah metode yang dipanggil dari penanganan aktivitas kontrol Paint .
Contoh berikut mengisi garis, elips, dan persegi panjang dengan sikat 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 intensitas setengah ketika koordinat horizontal hanya 20 persen dari cara 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 mengisi elips dan persegi panjang dengan sikat 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 dengan sikat 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
Teruskan 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)
Baca juga
.NET Desktop feedback