Melukis dengan Warna Solid dan Gradien Gambaran Umum

Artikel
07/13/2023

Topik ini menjelaskan cara menggunakan SolidColorBrushobjek , , LinearGradientBrushdan RadialGradientBrush untuk melukis dengan warna solid, gradien linier, dan gradien radial.

Mengecat Area dengan Warna Solid

Salah satu operasi paling umum di platform apa pun adalah melukis area dengan padat Color. Untuk menyelesaikan tugas ini, Windows Presentation Foundation (WPF) menyediakan SolidColorBrush kelas . Bagian berikut menjelaskan berbagai cara untuk melukis dengan SolidColorBrush.

Menggunakan SolidColorBrush di "XAML"

Untuk mengecat area dengan warna solid di XAML, gunakan salah satu opsi berikut.

Pilih kuas warna solid yang telah ditentukan sebelumnya berdasarkan nama. Misalnya, Anda dapat mengatur tombol Background ke "Merah" atau "MediumBlue". Untuk daftar kuas warna solid lainnya yang telah ditentukan sebelumnya, lihat properti Brushes statis kelas. Berikut adalah contohnya.
```

<Button Background="Red">A Button</Button>
```
Pilih warna dari palet warna 32-bit dengan menentukan jumlah merah, hijau, dan biru untuk digabungkan menjadi satu warna solid. Format untuk menentukan warna dari palet 32-bit adalah "#rrggbb", di mana rr adalah angka heksadesimal dua digit yang menentukan jumlah relatif merah, gg menentukan jumlah hijau, dan bb menentukan jumlah biru. Selain itu, warna dapat ditentukan sebagai "#aarrggbb" di mana aa menentukan nilai alfa , atau transparansi, dari warna. Pendekatan ini memungkinkan Anda membuat warna yang sebagian transparan. Dalam contoh berikut, Background dari diatur Button ke merah yang sepenuhnya buram menggunakan notasi heksadesimal.
```

<Button Background="#FFFF0000">A Button</Button>
```
Gunakan sintaks tag properti untuk menjelaskan SolidColorBrush. Sintaks ini lebih verbose tetapi memungkinkan Anda menentukan pengaturan tambahan, seperti keburaman kuas. Dalam contoh berikut, Background properti dua Button elemen diatur ke merah buram sepenuhnya. Warna kuas pertama dijelaskan menggunakan nama warna yang telah ditentukan sebelumnya. Warna kuas kedua dijelaskan menggunakan notasi heksadesimal.
```

<Button>A Button

  <Button.Background>
    <SolidColorBrush Color="Red" />
  </Button.Background>
</Button>

<Button>A Button

  <Button.Background>
    <SolidColorBrush Color="#FFFF0000" />
  </Button.Background>
</Button>  
```

Lukisan dengan SolidColorBrush dalam Kode

Untuk melukis area dengan warna solid dalam kode, gunakan salah satu opsi berikut.

Gunakan salah satu kuas yang telah ditentukan sebelumnya yang disediakan oleh Brushes kelas . Dalam contoh berikut, Background dari a Button diatur ke Red.
```
Button myButton = new Button();
myButton.Content = "A Button";
myButton.Background = Brushes.Red;
```
Buat SolidColorBrush dan atur propertinya Color menggunakan Color struktur. Anda dapat menggunakan warna yang telah ditentukan sebelumnya dari Colors kelas atau Anda dapat membuat Color menggunakan metode statis FromArgb .

Contoh berikut menunjukkan cara mengatur Color properti menggunakan warna yang SolidColorBrush telah ditentukan sebelumnya.
```
Button myButton = new Button();
myButton.Content = "A Button";

SolidColorBrush mySolidColorBrush = new SolidColorBrush();
mySolidColorBrush.Color = Colors.Red;
myButton.Background = mySolidColorBrush;
```

Statis FromArgb memungkinkan Anda menentukan nilai alfa, merah, hijau, dan biru warna. Rentang umum untuk masing-masing nilai ini adalah 0-255. Misalnya, nilai alfa 0 menunjukkan bahwa warna benar-benar transparan, sementara nilai 255 menunjukkan warna benar-benar buram. Demikian juga, nilai merah 0 menunjukkan bahwa warna tidak memiliki warna merah di dalamnya, sementara nilai 255 menunjukkan warna memiliki jumlah merah maksimum yang mungkin. Dalam contoh berikut, warna kuas dijelaskan dengan menentukan nilai alfa, merah, hijau, dan biru.

Button myButton = new Button();
myButton.Content = "A Button";

SolidColorBrush mySolidColorBrush = new SolidColorBrush();
mySolidColorBrush.Color =
    Color.FromArgb(
        255, // Specifies the transparency of the color.
        255, // Specifies the amount of red.
        0, // specifies the amount of green.
        0); // Specifies the amount of blue.

myButton.Background = mySolidColorBrush;

Untuk cara tambahan untuk menentukan warna, lihat Color topik referensi.

Mengecat Area dengan Gradien

Sikat gradien melukis area dengan beberapa warna yang berbaur satu sama lain di sepanjang sumbu. Anda dapat menggunakannya untuk menciptakan kesan cahaya dan bayangan, memberikan kontrol Anda nuansa tiga dimensi. Anda juga dapat menggunakannya untuk mensimulasikan kaca, krom, air, dan permukaan halus lainnya. WPF menyediakan dua jenis sikat gradien: LinearGradientBrush dan RadialGradientBrush.

Gradien Linier

Sebuah LinearGradientBrush cat area dengan gradien yang ditentukan di sepanjang garis, sumbu gradien. Anda menentukan warna gradien dan lokasinya di sepanjang sumbu gradien menggunakan GradientStop objek. Anda juga dapat memodifikasi sumbu gradien, yang memungkinkan Anda membuat gradien horizontal dan vertikal dan membalikkan arah gradien. Sumbu gradien dijelaskan di bagian berikutnya. Secara default, gradien diagonal dibuat.

Contoh berikut menunjukkan kode yang membuat gradien linier dengan empat warna.

<!-- This rectangle is painted with a diagonal linear gradient. -->
<Rectangle Width="200" Height="100">
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

Rectangle diagonalFillRectangle = new Rectangle();
diagonalFillRectangle.Width = 200;
diagonalFillRectangle.Height = 100;

// Create a diagonal linear gradient with four stops.
LinearGradientBrush myLinearGradientBrush =
    new LinearGradientBrush();
myLinearGradientBrush.StartPoint = new Point(0,0);
myLinearGradientBrush.EndPoint = new Point(1,1);
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Yellow, 0.0));
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Red, 0.25));
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Blue, 0.75));
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Colors.LimeGreen, 1.0));

// Use the brush to paint the rectangle.
diagonalFillRectangle.Fill = myLinearGradientBrush;

Kode ini menghasilkan gradien berikut:

A diagonal linear gradient

Catatan

Contoh gradien dalam topik ini menggunakan sistem koordinat default untuk mengatur titik awal dan titik akhir. Sistem koordinat default relatif terhadap kotak pembatas: 0 menunjukkan 0 persen kotak pembatas dan 1 menunjukkan 100 persen kotak pembatas. Anda dapat mengubah sistem koordinat ini dengan mengatur MappingMode properti ke nilai Absolute. Sistem koordinat absolut tidak relatif terhadap kotak pembatas. Nilai ditafsirkan langsung di ruang lokal.

GradientStop adalah blok bangunan dasar dari sikat gradien. Pemberhentian gradien menentukan Color di Offset sepanjang sumbu gradien.

Properti stop Color gradien menentukan warna pemberhentian gradien. Anda dapat mengatur warna dengan menggunakan warna yang telah ditentukan sebelumnya (disediakan oleh Colors kelas) atau dengan menentukan nilai ScRGB atau ARGB. Di XAML, Anda juga dapat menggunakan notasi heksadesimal untuk menggambarkan warna. Untuk informasi selengkapnya, lihat strukturnya Color .
Properti stop gradien Offset menentukan posisi warna hentian gradien pada sumbu gradien. Offset adalah Double yang berkisar antara 0 hingga 1. Semakin dekat nilai offset hentian gradien adalah 0, semakin dekat warnanya dengan awal gradien. Semakin dekat nilai offset gradien menjadi 1, semakin dekat warnanya ke akhir gradien.

Warna setiap titik antara perhentian gradien secara linier diinterpolasi sebagai kombinasi warna yang ditentukan oleh dua pemberhentian gradien pembatas. Ilustrasi berikut menyoroti pemberhentian gradien dalam contoh sebelumnya. Lingkaran menandai posisi hentian gradien dan garis putus-putus memperlihatkan sumbu gradien.

Gradient stops in a linear gradient

Pemberhentian gradien pertama menentukan warna kuning pada offset .0.0 Pemberhentian gradien kedua menentukan warna merah pada offset .0.25 Titik-titik di antara keduanya berhenti secara bertahap berubah dari kuning ke merah saat Anda bergerak dari kiri ke kanan di sepanjang sumbu gradien. Pemberhentian gradien ketiga menentukan warna biru pada offset .0.75 Titik-titik antara gradien kedua dan ketiga berhenti secara bertahap berubah dari merah ke biru. Pemberhentian gradien keempat menentukan warna kapur hijau pada offset .1.0 Titik-titik antara gradien ketiga dan keempat berhenti secara bertahap berubah dari biru ke hijau kapur.

Sumbu Gradien

Seperti yang disebutkan sebelumnya, pemberhentian gradien gradien linier diposisikan di sepanjang garis, sumbu gradien. Anda dapat mengubah orientasi dan ukuran garis menggunakan sikat StartPoint dan EndPoint properti. Dengan memanipulasi sikat StartPoint dan EndPoint, Anda dapat membuat gradien horizontal dan vertikal, membalik arah gradien, mengembun sebaran gradien, dan banyak lagi.

Secara default, sikat StartPoint gradien linier dan EndPoint relatif terhadap area yang dicat. Titik (0,0) mewakili sudut kiri atas area yang dicat, dan (1,1) mewakili sudut kanan bawah area yang dicat. Defaultnya StartPoint LinearGradientBrush adalah (0,0), dan defaultnya EndPoint adalah (1,1), yang membuat gradien diagonal dimulai di sudut kiri atas dan meluas ke sudut kanan bawah area yang dicat. Ilustrasi berikut menunjukkan sumbu gradien sikat gradien linier dengan default StartPoint dan EndPoint.

Gradient axis for a diagonal linear gradient

Contoh berikut menunjukkan cara membuat gradien horizontal dengan menentukan kuas StartPoint dan EndPoint. Perhatikan bahwa pemberhentian gradien sama seperti pada contoh sebelumnya; dengan hanya mengubah StartPoint dan EndPoint, gradien telah diubah dari diagonal ke horizontal.

<!-- This rectangle is painted with a horizontal linear gradient. -->
<Rectangle Width="200" Height="100">
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

Rectangle horizontalFillRectangle = new Rectangle();
horizontalFillRectangle.Width = 200;
horizontalFillRectangle.Height = 100;

// Create a horizontal linear gradient with four stops.
LinearGradientBrush myHorizontalGradient =
    new LinearGradientBrush();
myHorizontalGradient.StartPoint = new Point(0,0.5);
myHorizontalGradient.EndPoint = new Point(1,0.5);
myHorizontalGradient.GradientStops.Add(
    new GradientStop(Colors.Yellow, 0.0));
myHorizontalGradient.GradientStops.Add(
    new GradientStop(Colors.Red, 0.25));
myHorizontalGradient.GradientStops.Add(
    new GradientStop(Colors.Blue, 0.75));
myHorizontalGradient.GradientStops.Add(
    new GradientStop(Colors.LimeGreen, 1.0));

// Use the brush to paint the rectangle.
horizontalFillRectangle.Fill = myHorizontalGradient;

Ilustrasi berikut menunjukkan gradien yang dibuat. Sumbu gradien ditandai dengan garis putus-putus, dan hentian gradien ditandai dengan lingkaran.

Gradient axis for a horizontal linear gradient

Contoh berikutnya menunjukkan cara membuat gradien vertikal.

<!-- This rectangle is painted with a vertical gradient. -->
<Rectangle Width="200" Height="100">
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

Rectangle verticalFillRectangle = new Rectangle();
verticalFillRectangle.Width = 200;
verticalFillRectangle.Height = 100;

// Create a vertical linear gradient with four stops.
LinearGradientBrush myVerticalGradient =
    new LinearGradientBrush();
myVerticalGradient.StartPoint = new Point(0.5,0);
myVerticalGradient.EndPoint = new Point(0.5,1);
myVerticalGradient.GradientStops.Add(
    new GradientStop(Colors.Yellow, 0.0));
myVerticalGradient.GradientStops.Add(
    new GradientStop(Colors.Red, 0.25));
myVerticalGradient.GradientStops.Add(
    new GradientStop(Colors.Blue, 0.75));
myVerticalGradient.GradientStops.Add(
    new GradientStop(Colors.LimeGreen, 1.0));

// Use the brush to paint the rectangle.
verticalFillRectangle.Fill = myVerticalGradient;

Ilustrasi berikut menunjukkan gradien yang dibuat. Sumbu gradien ditandai dengan garis putus-putus, dan hentian gradien ditandai dengan lingkaran.

Gradient axis for a vertical gradient

Gradien Radial

LinearGradientBrushSeperti , melukis RadialGradientBrush area dengan warna yang berpadu bersama-sama dengan sumbu. Contoh sebelumnya menunjukkan bagaimana sumbu sikat gradien linier adalah garis lurus. Sumbu sikat gradien radial didefinisikan oleh lingkaran; warnanya "menjalar" keluar dari asalnya.

Dalam contoh berikut, kuas gradien radial digunakan untuk mengecat interior persegi panjang.

<!-- This rectangle is painted with a diagonal linear gradient. -->
<Rectangle Width="200" Height="100">
  <Rectangle.Fill>
    <RadialGradientBrush 
      GradientOrigin="0.5,0.5" Center="0.5,0.5" 
      RadiusX="0.5" RadiusY="0.5">
      <GradientStop Color="Yellow" Offset="0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1" />
    </RadialGradientBrush>
  </Rectangle.Fill>
</Rectangle>

RadialGradientBrush myRadialGradientBrush = new RadialGradientBrush();
myRadialGradientBrush.GradientOrigin = new Point(0.5,0.5);
myRadialGradientBrush.Center = new Point(0.5,0.5);
myRadialGradientBrush.RadiusX = 0.5;
myRadialGradientBrush.RadiusY = 0.5;
myRadialGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Yellow, 0.0));
myRadialGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Red, 0.25));
myRadialGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Blue, 0.75));
myRadialGradientBrush.GradientStops.Add(
    new GradientStop(Colors.LimeGreen, 1.0));

Rectangle myRectangle = new Rectangle();
myRectangle.Width = 200;
myRectangle.Height = 100;
myRectangle.Fill = myRadialGradientBrush;

Ilustrasi berikut menunjukkan gradien yang dibuat dalam contoh sebelumnya. Pemberhentian gradien kuas telah disorot. Perhatikan bahwa, meskipun hasilnya berbeda, gradien berhenti dalam contoh ini identik dengan gradien berhenti dalam contoh sikat gradien linier sebelumnya.

Gradient stops in a radial gradient

GradientOrigin menentukan titik awal sumbu gradien gradien radial. Sumbu gradien memancar dari asal gradien ke lingkaran gradien. Lingkaran gradien kuas didefinisikan oleh Centerproperti , , RadiusXdan RadiusY .

Ilustrasi berikut menunjukkan beberapa gradien radial dengan pengaturan , , Center RadiusX, dan RadiusY yang berbedaGradientOrigin.

RadialGradientBrush settings RadialGradientBrushes dengan pengaturan GradientOrigin, Center, RadiusX, dan RadiusY yang berbeda.

Menentukan Pemberhentian Gradien Transparan atau Sebagian

Karena pemberhentian gradien tidak menyediakan properti opasitas, Anda harus menentukan saluran alfa warna menggunakan notasi heksadesimal ARGB dalam markup atau menggunakan Color.FromScRgb metode untuk membuat pemberhentian gradien yang transparan atau sebagian transparan. Bagian berikut menjelaskan cara membuat pemberhentian gradien transparan sebagian di XAML dan kode.

Menentukan Keburaman Warna di "XAML"

Di XAML, Anda menggunakan notasi heksadesimal ARGB untuk menentukan keburaman warna individu. Notasi heksadesimal ARGB menggunakan sintaks berikut:

#aarrggbb

Aa di baris sebelumnya mewakili nilai heksadesimal dua digit yang digunakan untuk menentukan keburaman warna. Masing-masing rr, gg, dan bb mewakili nilai heksadesimal dua digit yang digunakan untuk menentukan jumlah merah, hijau, dan biru dalam warna. Setiap digit heksadesimal mungkin memiliki nilai dari 0-9 atau A-F. 0 adalah nilai terkecil, dan F adalah yang terbesar. Nilai alfa 00 menentukan warna yang benar-benar transparan, sementara nilai alfa FF membuat warna yang sepenuhnya buram. Dalam contoh berikut, notasi ARGB heksadesimal digunakan untuk menentukan dua warna. Yang pertama sebagian transparan (memiliki nilai alfa x20), sedangkan yang kedua benar-benar buram.

<Rectangle Width="100" Height="100">
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0,0">

      <!-- This gradient stop is partially transparent. -->
      <GradientStop Color="#200000FF" Offset="0.0" />

      <!-- This gradient stop is fully opaque. -->
      <GradientStop Color="#FF0000FF" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

Menentukan Keburaman Warna dalam Kode

Saat menggunakan kode, metode statis FromArgb memungkinkan Anda menentukan nilai alfa saat Membuat warna. Metode ini mengambil empat parameter jenis Byte. Parameter pertama menentukan saluran alfa warna; tiga parameter lainnya menentukan nilai warna merah, hijau, dan biru. Setiap nilai harus antara 0 hingga 255, inklusif. Nilai alfa 0 menentukan bahwa warna benar-benar transparan, sementara nilai alfa 255 menentukan bahwa warna benar-benar buram. Dalam contoh berikut, FromArgb metode ini digunakan untuk menghasilkan dua warna. Warna pertama sebagian transparan (memiliki nilai alfa 32), sedangkan yang kedua sepenuhnya buram.

LinearGradientBrush myLinearGradientBrush = new LinearGradientBrush();

// This gradient stop is partially transparent.
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Color.FromArgb(32, 0, 0, 255), 0.0));

// This gradient stop is fully opaque.
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Color.FromArgb(255, 0, 0, 255), 1.0));

Rectangle myRectangle = new Rectangle();
myRectangle.Width = 100;
myRectangle.Height = 100;
myRectangle.Fill = myLinearGradientBrush;

Atau, Anda dapat menggunakan FromScRgb metode , yang memungkinkan Anda menggunakan nilai ScRGB untuk membuat warna.

Melukis dengan Gambar, Gambar, Visual, dan Pola

ImageBrushKelas , DrawingBrush, dan VisualBrush memungkinkan Anda melukis area dengan gambar, gambar, atau visual. Untuk informasi tentang melukis dengan gambar, gambar, dan pola, lihat Melukis dengan Gambar, Gambar, dan Visual.

Bagikan melalui