Bagikan melalui

Membuat Gradien Jalur

  • Artikel

Kelas PathGradientBrush memungkinkan Anda menyesuaikan cara Anda mengisi bentuk dengan warna yang berubah secara bertahap. Objek PathGradientBrush memiliki jalur batas dan titik tengah. Anda dapat menentukan satu warna untuk titik tengah dan warna lain untuk batas. Anda juga dapat menentukan warna terpisah untuk masing-masing dari beberapa titik di sepanjang batas.

Catatan

Di GDI+, jalur adalah urutan garis dan kurva yang dikelola oleh objek GraphicsPath . Untuk informasi selengkapnya tentang jalur GDI+, lihat Jalur dan Membangun dan Menggambar Jalur.

 

Contoh berikut mengisi elips dengan sikat gradien jalur. Warna tengah diatur ke biru dan warna batas diatur ke aqua.

// Create a path that consists of a single ellipse.
GraphicsPath path;
path.AddEllipse(0, 0, 140, 70);

// Use the path to construct a brush.
PathGradientBrush pthGrBrush(&path);

// Set the color at the center of the path to blue.
pthGrBrush.SetCenterColor(Color(255, 0, 0, 255));

// Set the color along the entire boundary of the path to aqua.
Color colors[] = {Color(255, 0, 255, 255)};
int count = 1;
pthGrBrush.SetSurroundColors(colors, &count);

graphics.FillEllipse(&pthGrBrush, 0, 0, 140, 70);

Ilustrasi berikut menunjukkan elips yang diisi.

ilustrasi memperlihatkan elips dengan isian gradien

Secara default, kuas gradien jalur tidak meluas di luar batas jalur. Jika Anda menggunakan sikat gradien jalur untuk mengisi bentuk yang meluas di luar batas jalur, area layar di luar jalur tidak akan terisi. Ilustrasi berikut menunjukkan apa yang terjadi jika Anda mengubah panggilan Grafis::FillEllipse dalam kode sebelumnya menjadi graphics.FillRectangle(&pthGrBrush, 0, 10, 200, 40).

ilustrasi memperlihatkan ilis horizontal elips sebelumnya

Menentukan Titik pada Batas

Contoh berikut membangun sikat gradien jalur dari jalur berbentuk star. Kode memanggil metode PathGradientBrush::SetCenterColor untuk mengatur warna di sentroid star ke merah. Kemudian kode memanggil metode PathGradientBrush::SetSurroundColors untuk menentukan berbagai warna (disimpan dalam array warna ) di titik individual dalam array titik . Pernyataan kode akhir mengisi jalur berbentuk star dengan sikat gradien jalur.

// Put the points of a polygon in an array.
Point points[] = {Point(75, 0),    Point(100, 50), 
                  Point(150, 50),  Point(112, 75),
                  Point(150, 150), Point(75, 100), 
                  Point(0, 150),   Point(37, 75), 
                  Point(0, 50),    Point(50, 50)};

// Use the array of points to construct a path.
GraphicsPath path;
path.AddLines(points, 10);

// Use the path to construct a path gradient brush.
PathGradientBrush pthGrBrush(&path);

// Set the color at the center of the path to red.
pthGrBrush.SetCenterColor(Color(255, 255, 0, 0));

// Set the colors of the points in the array.
Color colors[] = {Color(255, 0, 0, 0),   Color(255, 0, 255, 0),
                  Color(255, 0, 0, 255), Color(255, 255, 255, 255), 
                  Color(255, 0, 0, 0),   Color(255, 0, 255, 0), 
                  Color(255, 0, 0, 255), Color(255, 255, 255, 255),
                  Color(255, 0, 0, 0),   Color(255, 0, 255, 0)};

int count = 10;
pthGrBrush.SetSurroundColors(colors, &count);

// Fill the path with the path gradient brush.
graphics.FillPath(&pthGrBrush, &path);

Ilustrasi berikut menunjukkan star yang diisi.

ilustrasi memperlihatkan star lima titik yang diisi dari merah di tengah ke berbagai warna di setiap titik star

Contoh berikut membangun sikat gradien jalur berdasarkan array titik. Warna ditetapkan ke masing-masing dari lima titik dalam array. Jika Anda menghubungkan lima titik dengan garis lurus, Anda akan mendapatkan poligon lima sisi. Warna juga ditetapkan ke tengah (sentroid) poligon tersebut — dalam contoh ini, pusat (80, 75) diatur ke putih. Pernyataan kode akhir dalam contoh mengisi persegi panjang dengan sikat gradien jalur.

Warna yang digunakan untuk mengisi persegi panjang berwarna putih pada (80, 75) dan berubah secara bertahap saat Anda menjauh dari (80, 75) ke arah titik dalam array. Misalnya, saat Anda berpindah dari (80, 75) ke (0, 0), warna berubah secara bertahap dari putih ke merah, dan saat Anda berpindah dari (80, 75) ke (160, 0), warna berubah secara bertahap dari putih ke hijau.

// Construct a path gradient brush based on an array of points.
PointF ptsF[] = {PointF(0.0f, 0.0f), 
                 PointF(160.0f, 0.0f), 
                 PointF(160.0f, 200.0f),
                 PointF(80.0f, 150.0f),
                 PointF(0.0f, 200.0f)};

PathGradientBrush pBrush(ptsF, 5);

// 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(255, 255, 0, 0),  // (0, 0) red
                  Color(255, 0, 255, 0),  // (160, 0) green
                  Color(255, 0, 255, 0),  // (160, 200) green
                  Color(255, 0, 0, 255),  // (80, 150) blue
                  Color(255, 255, 0, 0)}; // (0, 200) red

int count = 5;
pBrush.SetSurroundColors(colors, &count);

// Set the center color to white.
pBrush.SetCenterColor(Color(255, 255, 255, 255));

// Use the path gradient brush to fill a rectangle.
graphics.FillRectangle(&pBrush, Rect(0, 0, 180, 220));

Perhatikan bahwa tidak ada objek GraphicsPath dalam kode sebelumnya. Konstruktor PathGradientBrush tertentu dalam contoh menerima penunjuk ke array titik tetapi tidak memerlukan objek GraphicsPath . Perhatikan juga bahwa kuas gradien jalur digunakan untuk mengisi persegi panjang, bukan jalur. Persegi panjang lebih besar dari jalur yang digunakan untuk menentukan kuas, sehingga beberapa persegi panjang tidak dicat oleh kuas. Ilustrasi berikut menunjukkan persegi panjang (garis putus-putus) dan bagian persegi panjang yang dicat oleh sikat gradien jalur.

ilustrasi memperlihatkan persegi panjang yang dibatasi oleh garis putus-putus, sebagian dicat oleh gradien multi-warna

Menyesuaikan Gradien Jalur

Salah satu cara untuk menyesuaikan sikat gradien jalur adalah dengan mengatur skala fokusnya. Skala fokus menentukan jalur dalam yang terletak di dalam jalur utama. Warna tengah ditampilkan di mana-mana di dalam jalur dalam itu daripada hanya di titik tengah. Untuk mengatur skala fokus kuas gradien jalur, panggil metode PathGradientBrush::SetFocusScales .

Contoh berikut membuat sikat gradien jalur berdasarkan jalur elips. Kode mengatur warna batas ke biru, mengatur warna tengah ke aqua, lalu menggunakan sikat gradien jalur untuk mengisi jalur elips.

Selanjutnya kode menetapkan skala fokus kuas gradien jalur. Skala fokus x diatur ke 0,3, dan skala fokus y diatur ke 0,8. Kode memanggil metode Graphics::TranslateTransform dari objek Graphics sehingga panggilan berikutnya ke Graphics::FillPath mengisi elips yang berada di sebelah kanan elips pertama.

Untuk melihat efek skala fokus, bayangkan elips kecil yang berbagi pusatnya dengan elips utama. Elips kecil (dalam) adalah elips utama yang diskalakan (sekitar tengahnya) secara horizontal oleh faktor 0,3 dan vertikal dengan faktor 0,8. Saat Anda berpindah dari batas elips luar ke batas elips bagian dalam, warna berubah secara bertahap dari biru ke aqua. Saat Anda berpindah dari batas elips dalam ke pusat bersama, warnanya tetap sama.

// Create a path that consists of a single ellipse.
GraphicsPath path;
path.AddEllipse(0, 0, 200, 100);

// Create a path gradient brush based on the elliptical path.
PathGradientBrush pthGrBrush(&path);
pthGrBrush.SetGammaCorrection(TRUE);

// Set the color along the entire boundary to blue.
Color color(Color(255, 0, 0, 255));
INT num = 1;
pthGrBrush.SetSurroundColors(&color, &num);

// Set the center color to aqua.
pthGrBrush.SetCenterColor(Color(255, 0, 255, 255));
 
// Use the path gradient brush to fill the ellipse. 
graphics.FillPath(&pthGrBrush, &path);

// Set the focus scales for the path gradient brush.
pthGrBrush.SetFocusScales(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.
graphics.TranslateTransform(220.0f, 0.0f);
graphics.FillPath(&pthGrBrush, &path);

Ilustrasi berikut menunjukkan output kode sebelumnya. Elips di sebelah kiri hanya sama di titik tengah. Elips di sebelah kanan adalah aqua di mana-mana di dalam jalan bagian dalam.

ilustrasi yang menunjukkan dua elipsis yang menaungi dari aqua ke biru: yang pertama memiliki sangat sedikit aqua; yang kedua memiliki lebih banyak

Cara lain untuk menyesuaikan sikat gradien jalur adalah dengan menentukan array warna preset dan array posisi interpolasi.

Contoh berikut membuat sikat gradien jalur berdasarkan segitiga. Kode ini memanggil metode PathGradientBrush::SetInterpolationColors dari sikat gradien jalur untuk menentukan array warna interpolasi (hijau gelap, aqua, biru) dan array posisi interpolasi (0, 0,25, 1). Saat Anda berpindah dari batas segitiga ke titik tengah, warna berubah secara bertahap dari hijau gelap ke aqua dan kemudian dari aqua ke biru. Perubahan dari hijau gelap ke aqua terjadi dalam 25 persen dari jarak dari hijau gelap ke biru.

// Vertices of the triangle
Point points[] = {Point(100, 0), 
                  Point(200, 200), 
                  Point(0, 200)};

// No GraphicsPath object is created. The PathGradient
// brush is constructed directly from the array of points.
PathGradientBrush pthGrBrush(points, 3);

Color presetColors[] = {
   Color(255, 0, 128, 0),    // Dark green
   Color(255, 0, 255, 255),  // Aqua
   Color(255, 0, 0, 255)};   // Blue

REAL interpPositions[] = {
   0.0f,   // Dark green is at the boundary of the triangle.
   0.25f,  // Aqua is 25 percent of the way from the boundary
           // to the center point.
   1.0f};  // Blue is at the center point.
                  
pthGrBrush.SetInterpolationColors(presetColors, interpPositions, 3);

// 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.
graphics.FillRectangle(&pthGrBrush, 0, 0, 200, 200);

Ilustrasi berikut menunjukkan output kode sebelumnya.

ilustrasi memperlihatkan segitiga yang berteduh dari biru di tengah, ke aqua, hingga hijau di tepi

Mengatur Titik Tengah

Secara default, titik tengah sikat gradien jalur berada di sentroid jalur yang digunakan untuk membangun kuas. Anda dapat mengubah lokasi titik tengah dengan memanggil metode PathGradientBrush::SetCenterPoint dari kelas PathGradientBrush .

Contoh berikut membuat sikat gradien jalur berdasarkan elips. Bagian tengah elips berada di (70, 35), tetapi titik tengah sikat gradien jalur diatur ke (120, 40).

// Create a path that consists of a single ellipse.
GraphicsPath path;
path.AddEllipse(0, 0, 140, 70);

// Use the path to construct a brush.
PathGradientBrush pthGrBrush(&path);

// Set the center point to a location that is not the centroid of the path.
pthGrBrush.SetCenterPoint(Point(120, 40));

// Set the color at the center point to blue.
pthGrBrush.SetCenterColor(Color(255, 0, 0, 255));

// Set the color along the entire boundary of the path to aqua.
Color colors[] = {Color(255, 0, 255, 255)};
int count = 1;
pthGrBrush.SetSurroundColors(colors, &count);

graphics.FillEllipse(&pthGrBrush, 0, 0, 140, 70);

Ilustrasi berikut menunjukkan elips yang diisi dan titik tengah sikat gradien jalur.

ilustrasi memperlihatkan elips yang terisi dari biru ke aqua dari titik tengah di dekat satu ujung

Anda dapat mengatur titik pusat sikat gradien jalur ke lokasi di luar jalur yang digunakan untuk membangun kuas. Dalam kode sebelumnya, jika Anda mengganti panggilan ke PathGradientBrush::SetCenterPoint dengan pthGrBrush.SetCenterPoint(Point(145, 35)), Anda akan mendapatkan hasil berikut.

ilustrasi memperlihatkan elips yang terisi dari merah ke kuning dari titik tengah yang berada di luar tepi elips

Dalam ilustrasi sebelumnya, titik-titik di ujung kanan elips tidak biru murni (meskipun sangat dekat). Warna dalam gradien diposisikan seolah-olah isi telah diizinkan untuk mencapai titik (145, 35), warna akan mencapai biru murni (0, 0, 255). Tetapi isian tidak pernah mencapai (145, 35) karena jalur sikat gradien hanya melukis di dalam jalurnya.