Cara: Membuat Gradien Jalur
Kelas ini PathGradientBrush memungkinkan Anda untuk menyesuaikan cara Anda mengisi bentuk dengan warna yang berubah secara bertahap. Misalnya, Anda dapat menentukan satu warna untuk pusat jalur dan warna lain untuk batas jalur. Anda juga dapat menentukan warna terpisah untuk masing-masing dari beberapa titik di sepanjang batas jalur.
Catatan
Di GDI+, jalur adalah urutan garis dan kurva yang GraphicsPath dikelola oleh objek. Untuk informasi selengkapnya tentang jalur GDI+, lihat Jalur Grafis di GDI+ dan Membuat dan Menggambar Jalur.
Contoh dalam artikel ini adalah metode yang dipanggil dari penanganan aktivitas kontrol Paint .
Untuk mengisi elips dengan gradien jalur
Contoh berikut mengisi elips dengan sikat gradien jalur. Warna tengah diatur ke biru dan warna batas diatur ke aqua. Ilustrasi berikut menunjukkan elips yang diisi.
Secara default, kuas gradien jalur tidak meluas di luar batas jalur. Jika Anda menggunakan kuas gradien jalur untuk mengisi gambar yang meluas di luar batas jalur, area layar di luar jalur tidak akan diisi.
Ilustrasi berikut menunjukkan apa yang terjadi jika Anda mengubah Graphics.FillEllipse panggilan dalam kode berikut menjadi
e.Graphics.FillRectangle(pthGrBrush, 0, 10, 200, 40)
:public void FillEllipseWithPathGradient(PaintEventArgs e) { // Create a path that consists of a single ellipse. GraphicsPath path = new GraphicsPath(); path.AddEllipse(0, 0, 140, 70); // Use the path to construct a brush. PathGradientBrush pthGrBrush = new PathGradientBrush(path); // Set the color at the center of the path to blue. pthGrBrush.CenterColor = Color.FromArgb(255, 0, 0, 255); // Set the color along the entire boundary // of the path to aqua. Color[] colors = { Color.FromArgb(255, 0, 255, 255) }; pthGrBrush.SurroundColors = colors; e.Graphics.FillEllipse(pthGrBrush, 0, 0, 140, 70); }
' Create a path that consists of a single ellipse. Dim path As New GraphicsPath() path.AddEllipse(0, 0, 140, 70) ' Use the path to construct a brush. Dim pthGrBrush As New PathGradientBrush(path) ' Set the color at the center of the path to blue. pthGrBrush.CenterColor = Color.FromArgb(255, 0, 0, 255) ' Set the color along the entire boundary ' of the path to aqua. Dim colors As Color() = {Color.FromArgb(255, 0, 255, 255)} pthGrBrush.SurroundColors = colors e.Graphics.FillEllipse(pthGrBrush, 0, 0, 140, 70)
Contoh kode sebelumnya dirancang untuk digunakan dengan Formulir Windows, dan memerlukan PaintEventArgs e, yang merupakan parameter dari PaintEventHandler.
Untuk menentukan titik pada batas
Contoh berikut membangun sikat gradien jalur dari jalur berbentuk bintang. Kode mengatur CenterColor properti , yang mengatur warna pada sentroid bintang ke merah. Kemudian kode mengatur SurroundColors properti untuk menentukan berbagai warna (disimpan dalam
colors
array) di titik individual dalampoints
array. Pernyataan kode akhir mengisi jalur berbentuk bintang dengan sikat gradien jalur.public void ConstructBrushFromStarShapedPath(PaintEventArgs e) { // Put the points of a polygon in an array. Point[] points = { new Point(75, 0), new Point(100, 50), new Point(150, 50), new Point(112, 75), new Point(150, 150), new Point(75, 100), new Point(0, 150), new Point(37, 75), new Point(0, 50), new Point(50, 50)}; // Use the array of points to construct a path. GraphicsPath path = new GraphicsPath(); path.AddLines(points); // Use the path to construct a path gradient brush. PathGradientBrush pthGrBrush = new PathGradientBrush(path); // Set the color at the center of the path to red. pthGrBrush.CenterColor = Color.FromArgb(255, 255, 0, 0); // Set the colors of the points in the array. Color[] colors = { Color.FromArgb(255, 0, 0, 0), Color.FromArgb(255, 0, 255, 0), Color.FromArgb(255, 0, 0, 255), Color.FromArgb(255, 255, 255, 255), Color.FromArgb(255, 0, 0, 0), Color.FromArgb(255, 0, 255, 0), Color.FromArgb(255, 0, 0, 255), Color.FromArgb(255, 255, 255, 255), Color.FromArgb(255, 0, 0, 0), Color.FromArgb(255, 0, 255, 0)}; pthGrBrush.SurroundColors = colors; // Fill the path with the path gradient brush. e.Graphics.FillPath(pthGrBrush, path); }
' Put the points of a polygon in an array. Dim points As Point() = { _ New Point(75, 0), _ New Point(100, 50), _ New Point(150, 50), _ New Point(112, 75), _ New Point(150, 150), _ New Point(75, 100), _ New Point(0, 150), _ New Point(37, 75), _ New Point(0, 50), _ New Point(50, 50)} ' Use the array of points to construct a path. Dim path As New GraphicsPath() path.AddLines(points) ' Use the path to construct a path gradient brush. Dim pthGrBrush As New PathGradientBrush(path) ' Set the color at the center of the path to red. pthGrBrush.CenterColor = Color.FromArgb(255, 255, 0, 0) ' Set the colors of the points in the array. Dim colors As Color() = { _ Color.FromArgb(255, 0, 0, 0), _ Color.FromArgb(255, 0, 255, 0), _ Color.FromArgb(255, 0, 0, 255), _ Color.FromArgb(255, 255, 255, 255), _ Color.FromArgb(255, 0, 0, 0), _ Color.FromArgb(255, 0, 255, 0), _ Color.FromArgb(255, 0, 0, 255), _ Color.FromArgb(255, 255, 255, 255), _ Color.FromArgb(255, 0, 0, 0), _ Color.FromArgb(255, 0, 255, 0)} pthGrBrush.SurroundColors = colors ' Fill the path with the path gradient brush. e.Graphics.FillPath(pthGrBrush, path)
Contoh berikut menggambar gradien jalur tanpa GraphicsPath objek dalam kode. Konstruktor tertentu PathGradientBrush dalam contoh menerima array titik tetapi tidak memerlukan GraphicsPath objek. Selain itu PathGradientBrush , perhatikan bahwa digunakan untuk mengisi persegi panjang, bukan jalur. Persegi panjang lebih besar dari jalur tertutup 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 kuas gradien jalur:
public void DrawPathGradentWthoutGraphicsPath(PaintEventArgs e) { // Construct a path gradient brush based on an array of points. PointF[] ptsF = { new PointF(0, 0), new PointF(160, 0), new PointF(160, 200), new PointF(80, 150), new PointF(0, 200)}; PathGradientBrush pBrush = new PathGradientBrush(ptsF); // 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.FromArgb(255, 255, 0, 0), // (0, 0) red Color.FromArgb(255, 0, 255, 0), // (160, 0) green Color.FromArgb(255, 0, 255, 0), // (160, 200) green Color.FromArgb(255, 0, 0, 255), // (80, 150) blue Color.FromArgb(255, 255, 0, 0)}; // (0, 200) red pBrush.SurroundColors = colors; // Set the center color to white. pBrush.CenterColor = Color.White; // Use the path gradient brush to fill a rectangle. e.Graphics.FillRectangle(pBrush, new Rectangle(0, 0, 160, 200)); }
' Construct a path gradient brush based on an array of points. Dim ptsF As PointF() = { _ New PointF(0, 0), _ New PointF(160, 0), _ New PointF(160, 200), _ New PointF(80, 150), _ New PointF(0, 200)} Dim pBrush As New PathGradientBrush(ptsF) ' An array of five points was used to construct the path gradient ' brush. Set the color of each point in that array. 'Point (0, 0) is red 'Point (160, 0) is green 'Point (160, 200) is green 'Point (80, 150) is blue 'Point (0, 200) is red Dim colors As Color() = { _ Color.FromArgb(255, 255, 0, 0), _ Color.FromArgb(255, 0, 255, 0), _ Color.FromArgb(255, 0, 255, 0), _ Color.FromArgb(255, 0, 0, 255), _ Color.FromArgb(255, 255, 0, 0)} pBrush.SurroundColors = colors ' Set the center color to white. pBrush.CenterColor = Color.White ' Use the path gradient brush to fill a rectangle. e.Graphics.FillRectangle(pBrush, New Rectangle(0, 0, 160, 200))
Untuk mengkustomisasi gradien jalur
Salah satu cara untuk menyesuaikan sikat gradien jalur adalah dengan mengatur propertinya FocusScales . 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.
Contoh berikut membuat kuas 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 sikat gradien jalur. Skala fokus x diatur ke 0,3, dan skala fokus y diatur ke 0,8. Kode memanggil TranslateTransform metode Graphics objek sehingga panggilan berikutnya untuk 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.
Ilustrasi berikut menunjukkan output kode berikut. Elips di sebelah kiri hanya aqua di titik tengah. Elips di sebelah kanan adalah aqua di mana-mana di dalam jalur dalam.
public void CustomizePathGradientBrush(PaintEventArgs e)
{
// Create a path that consists of a single ellipse.
GraphicsPath path = new GraphicsPath();
path.AddEllipse(0, 0, 200, 100);
// Create a path gradient brush based on the elliptical path.
PathGradientBrush pthGrBrush = new PathGradientBrush(path);
// Set the color along the entire boundary to blue.
Color[] color = { Color.Blue };
pthGrBrush.SurroundColors = color;
// Set the center color to aqua.
pthGrBrush.CenterColor = Color.Aqua;
// Use the path gradient brush to fill the ellipse.
e.Graphics.FillPath(pthGrBrush, path);
// Set the focus scales for the path gradient brush.
pthGrBrush.FocusScales = new PointF(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.
e.Graphics.TranslateTransform(220.0f, 0.0f);
e.Graphics.FillPath(pthGrBrush, path);
}
' Create a path that consists of a single ellipse.
Dim path As New GraphicsPath()
path.AddEllipse(0, 0, 200, 100)
' Create a path gradient brush based on the elliptical path.
Dim pthGrBrush As New PathGradientBrush(path)
' Set the color along the entire boundary to blue.
' Changed variable name from color
Dim blueColor As Color() = {Color.Blue}
pthGrBrush.SurroundColors = blueColor
' Set the center color to aqua.
pthGrBrush.CenterColor = Color.Aqua
' Use the path gradient brush to fill the ellipse.
e.Graphics.FillPath(pthGrBrush, path)
' Set the focus scales for the path gradient brush.
pthGrBrush.FocusScales = New PointF(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.
e.Graphics.TranslateTransform(220.0F, 0.0F)
e.Graphics.FillPath(pthGrBrush, path)
Untuk menyesuaikan dengan interpolasi
Cara lain untuk menyesuaikan kuas gradien jalur adalah dengan menentukan array warna interpolasi dan array posisi interpolasi.
Contoh berikut membuat sikat gradien jalur berdasarkan segitiga. Kode mengatur InterpolationColors properti sikat gradien jalur untuk menentukan array warna interpolasi (hijau gelap, 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.
Ilustrasi berikut menunjukkan segitiga yang diisi dengan sikat gradien jalur kustom.
public void CustomizeWithInterpolation(PaintEventArgs e) { // Vertices of the outer triangle Point[] points = { new Point(100, 0), new Point(200, 200), new Point(0, 200)}; // No GraphicsPath object is created. The PathGradientBrush // object is constructed directly from the array of points. PathGradientBrush pthGrBrush = new PathGradientBrush(points); Color[] colors = { Color.FromArgb(255, 0, 128, 0), // dark green Color.FromArgb(255, 0, 255, 255), // aqua Color.FromArgb(255, 0, 0, 255)}; // blue float[] relativePositions = { 0f, // Dark green is at the boundary of the triangle. 0.4f, // Aqua is 40 percent of the way from the boundary // to the center point. 1.0f}; // Blue is at the center point. ColorBlend colorBlend = new ColorBlend(); colorBlend.Colors = colors; colorBlend.Positions = relativePositions; pthGrBrush.InterpolationColors = colorBlend; // 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. e.Graphics.FillRectangle(pthGrBrush, 0, 0, 200, 200); }
' Vertices of the outer triangle Dim points As Point() = { _ New Point(100, 0), _ New Point(200, 200), _ New Point(0, 200)} ' No GraphicsPath object is created. The PathGradientBrush ' object is constructed directly from the array of points. Dim pthGrBrush As New PathGradientBrush(points) ' Create an array of colors containing dark green, aqua, and blue. Dim colors As Color() = { _ Color.FromArgb(255, 0, 128, 0), _ Color.FromArgb(255, 0, 255, 255), _ Color.FromArgb(255, 0, 0, 255)} ' Dark green is at the boundary of the triangle. ' Aqua is 40 percent of the way from the boundary to the center point. ' Blue is at the center point. Dim relativePositions As Single() = { _ 0.0F, _ 0.4F, _ 1.0F} Dim colorBlend As New ColorBlend() colorBlend.Colors = colors colorBlend.Positions = relativePositions pthGrBrush.InterpolationColors = colorBlend ' 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. e.Graphics.FillRectangle(pthGrBrush, 0, 0, 200, 200)
Untuk 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 mengatur CenterPoint properti PathGradientBrush kelas.
Contoh berikut membuat kuas gradien jalur berdasarkan elips. Bagian tengah elips berada di (70, 35), tetapi titik tengah sikat gradien jalur diatur ke (120, 40).
public void SetCenterPoint(PaintEventArgs e) { // Create a path that consists of a single ellipse. GraphicsPath path = new GraphicsPath(); path.AddEllipse(0, 0, 140, 70); // Use the path to construct a brush. PathGradientBrush pthGrBrush = new PathGradientBrush(path); // Set the center point to a location that is not // the centroid of the path. pthGrBrush.CenterPoint = new PointF(120, 40); // Set the color at the center of the path to blue. pthGrBrush.CenterColor = Color.FromArgb(255, 0, 0, 255); // Set the color along the entire boundary // of the path to aqua. Color[] colors = { Color.FromArgb(255, 0, 255, 255) }; pthGrBrush.SurroundColors = colors; e.Graphics.FillEllipse(pthGrBrush, 0, 0, 140, 70); }
' Create a path that consists of a single ellipse. Dim path As New GraphicsPath() path.AddEllipse(0, 0, 140, 70) ' Use the path to construct a brush. Dim pthGrBrush As New PathGradientBrush(path) ' Set the center point to a location that is not ' the centroid of the path. pthGrBrush.CenterPoint = New PointF(120, 40) ' Set the color at the center of the path to blue. pthGrBrush.CenterColor = Color.FromArgb(255, 0, 0, 255) ' Set the color along the entire boundary ' of the path to aqua. Dim colors As Color() = {Color.FromArgb(255, 0, 255, 255)} pthGrBrush.SurroundColors = colors e.Graphics.FillEllipse(pthGrBrush, 0, 0, 140, 70)
Ilustrasi berikut menunjukkan elips yang diisi dan titik tengah sikat gradien jalur:
Anda dapat mengatur titik tengah sikat gradien jalur ke lokasi di luar jalur yang digunakan untuk membangun kuas. Contoh berikut menggantikan panggilan untuk mengatur CenterPoint properti dalam kode sebelumnya.
public void SetCenterPointOutsidePath(PaintEventArgs e) { // Create a path that consists of a single ellipse. GraphicsPath path = new GraphicsPath(); path.AddEllipse(0, 0, 140, 70); // Use the path to construct a brush. PathGradientBrush pthGrBrush = new PathGradientBrush(path); // Set the center point to a location that is not // the centroid of the path. pthGrBrush.CenterPoint = new PointF(145, 35); // Set the color at the center of the path to blue. pthGrBrush.CenterColor = Color.FromArgb(255, 0, 0, 255); // Set the color along the entire boundary // of the path to aqua. Color[] colors = { Color.FromArgb(255, 0, 255, 255) }; pthGrBrush.SurroundColors = colors; e.Graphics.FillEllipse(pthGrBrush, 0, 0, 140, 70); }
pthGrBrush.CenterPoint = New PointF(145, 35)
Ilustrasi berikut menunjukkan output dengan perubahan ini:
Dalam ilustrasi sebelumnya, titik-titik di ujung kanan elips tidak biru murni (meskipun sangat dekat). Warna dalam gradien diposisikan seolah-olah isi mencapai titik (145, 35) di mana warnanya akan biru murni (0, 0, 255). Tetapi isinya tidak pernah mencapai (145, 35) karena sikat gradien jalur hanya melukis di dalam jalurnya.
Mengompilasi Kode
Contoh sebelumnya dirancang untuk digunakan dengan Formulir Windows, dan memerlukan PaintEventArgse
, yang merupakan parameter penanganan Paint aktivitas.
Baca juga
.NET Desktop feedback
Saran dan Komentar
https://aka.ms/ContentUserFeedback.
Segera hadir: Sepanjang tahun 2024 kami akan menghentikan penggunaan GitHub Issues sebagai mekanisme umpan balik untuk konten dan menggantinya dengan sistem umpan balik baru. Untuk mengetahui informasi selengkapnya, lihat:Kirim dan lihat umpan balik untuk