Bagikan melalui

Membuat Gradien Jalur

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

Nota

Di GDI+, jalur adalah urutan garis dan kurva yang dikelola oleh objekGraphicsPath. Untuk informasi selengkapnya tentang jalur GDI+, lihat jalur dan jalur Konstruksi dan Gambar .

 

Contoh berikut mengisi elips dengan kuas 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 yang menunjukkan elips dengan isi gradien

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

ilustrasi menunjukkan irisan horizontal dari elips sebelumnya

Menentukan Titik pada Batas

Contoh berikut membuat kuas gradien jalur dari jalur berbentuk bintang. Kode memanggil metodePathGradientBrush::SetCenterColor untuk mengatur warna di sentroid bintang 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 bintang 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 bintang yang terisi.

ilustrasi memperlihatkan bintang lima titik yang diisi dari merah di tengah hingga berbagai warna di setiap titik bintang

Contoh berikut ini membuat kuas gradien jalur berdasarkan array titik. Warna ditetapkan ke masing-masing dari lima titik dalam array. Jika Anda menyambungkan lima poin 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 terakhir dalam contoh mengisi persegi panjang dengan kuas 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. KonstruktorPathGradientBrush yang digunakan dalam contoh ini menerima pointer ke array titik, tetapi tidak memerlukan objek GraphicsPath. Perhatikan juga bahwa kuas gradien jalur digunakan untuk mengisi kotak persegi panjang, bukan sebuah jalur. Rektangel lebih besar dari jalur yang digunakan untuk menggambar kuas, sehingga beberapa bagian dari rektangel tidak diwarnai oleh kuas. Ilustrasi berikut menunjukkan persegi panjang (garis putus-putus) dan bagian persegi panjang yang dicat oleh kuas jalur gradien.

ilustrasi memperlihatkan segi empat yang dibatasi oleh garis putus-putus, dicat sebagian oleh gradien multiwarna

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 pusat ditampilkan di seluruh bagian dalam jalur itu daripada hanya di titik tengah. Untuk mengatur skala fokus kuas gradien jalur, panggil metode PathGradientBrush::SetFocusScales.

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

Selanjutnya kode mengatur skala fokus dari 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 Grafis sehingga panggilan berikutnya ke Graphics::FillPath menggambar 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 aqua.

// 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 memiliki warna aqua pada titik tengahnya. Elips di sebelah kanan seluruh bagian dalamnya berwarna aqua.

ilustrasi yang menunjukkan dua elips yang bergradasi dari warna aqua ke biru: yang pertama hanya sedikit berwarna aqua; yang kedua memiliki lebih banyak warna aqua

Cara lain untuk menyesuaikan kuas gradien jalur adalah dengan menentukan array warna prasetel dan array posisi interpolasi.

Contoh berikut membuat sikat gradien jalur berdasarkan segitiga. Kode ini memanggil metode PathGradientBrush::SetInterpolationColors dari kuas gradien jalur untuk menentukan array warna interpolasi (hijau tua, aqua, biru) dan array posisi interpolasi (0, 0.25, 1). Saat Anda bergerak 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 bergradasi dari biru di tengah, ke biru laut, hingga hijau di tepi

Mengatur Titik Tengah

Secara bawaan, titik tengah kuas gradien jalur berada di sentroid jalur yang digunakan untuk membentuk kuas. Anda dapat mengubah lokasi titik tengah dengan memanggil metode PathGradientBrush::SetCenterPoint dari PathGradientBrush class.

Contoh berikut ini menunjukkan cara membuat kuas gradasi jalur dengan dasar elips. Pusat elips berada di (70, 35), tetapi titik pusat kuas 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 pusat sikat gradien jalur.

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

Anda dapat mengatur titik tengah kuas gradien jalur ke lokasi di luar jalur yang digunakan untuk membentuk 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 seakan-akan pengisian diizinkan mencapai titik (145, 35), warnanya akan menjadi biru murni (0, 0, 255). Tetapi isian tidak pernah mencapai (145, 35) karena kuas gradien jalur hanya mengisi di dalam jalurnya.

 

 

  • Last updated on