Gambaran Umum Masker Opasitas

Artikel
10/18/2023

Masker opasitas memungkinkan Anda membuat bagian dari elemen atau visual baik transparan atau sebagian transparan. Untuk membuat masker opasitas, Anda menerapkan Brush ke OpacityMask properti elemen atau Visual. Kuas dipetakan ke elemen atau visual, dan nilai keburaman dari setiap piksel kuas digunakan untuk menentukan keburaman yang dihasilkan dari setiap piksel yang sesuai dari elemen atau visual.

Prasyarat

Gambaran umum ini mengasumsikan bahwa Anda terbiasa dengan Brush objek. Untuk pengenalan menggunakan kuas, lihat Melukis dengan Warna Solid dan Gambaran Umum Gradien. Untuk informasi tentang ImageBrush dan DrawingBrush, lihat Melukis dengan Gambar, Gambar, dan Visual.

Membuat Efek Visual dengan Masker Opacity

Masker opasitas bekerja dengan memetakan kontennya ke elemen atau visual. Saluran alfa dari setiap piksel kuas kemudian digunakan untuk menentukan keburaman elemen atau piksel terkait visual yang dihasilkan; warna aktual kuas diabaikan. Jika bagian tertentu dari kuas transparan, bagian yang sesuai dari elemen atau visual menjadi transparan. Jika bagian tertentu dari kuas buram, keburaman bagian elemen atau visual yang sesuai tidak berubah. Opasitas yang ditentukan oleh masker opasitas dikombinasikan dengan pengaturan opasitas apa pun yang ada dalam elemen atau visual. Misalnya, jika elemen adalah 25 persen buram dan masker opasitas diterapkan bahwa transisi dari sepenuhnya buram ke sepenuhnya transparan, hasilnya adalah elemen yang beralih dari 25 persen opasitas ke transparan sepenuhnya.

Catatan

Meskipun contoh dalam gambaran umum ini menunjukkan penggunaan masker opasitas pada elemen gambar, masker opasitas dapat diterapkan ke elemen atau Visual, termasuk panel dan kontrol.

Masker opasitas digunakan untuk membuat efek visual yang menarik, seperti membuat gambar atau tombol yang memudar dari tampilan, untuk menambahkan tekstur ke elemen, atau untuk menggabungkan gradien untuk menghasilkan permukaan seperti kaca. Ilustrasi berikut menunjukkan penggunaan masker opasitas. Latar belakang kotak-kotak digunakan untuk menunjukkan bagian transparan dari masker.

Object with a LinearGradientBrush opacity mask
Contoh masking opasitas

Membuat Masker Opacity

Untuk membuat masker opasitas, Anda membuat Brush dan menerapkannya ke OpacityMask properti elemen atau visual. Anda dapat menggunakan semua jenis Brush sebagai masker opasitas.

LinearGradientBrush, RadialGradientBrush: Digunakan untuk membuat elemen atau visual memudar dari tampilan.

Gambar berikut menunjukkan digunakan LinearGradientBrush sebagai masker opasitas.

Contoh Masking LinearGradientBrush Opacity
ImageBrush: Digunakan untuk membuat tekstur dan efek tepi lembut atau robek.

Gambar berikut menunjukkan yang ImageBrush digunakan sebagai masker opasitas.

Contoh masking opasitas LinearGradientBrush
DrawingBrush: Digunakan untuk membuat masker opasitas kompleks dari pola bentuk, gambar, dan gradien.

Gambar berikut menunjukkan digunakan DrawingBrush sebagai masker opasitas.

Contoh masking opacity DrawingBrush

Sikat gradien (LinearGradientBrush dan RadialGradientBrush) sangat cocok untuk digunakan sebagai masker opasitas. SolidColorBrush Karena mengisi area dengan warna seragam, mereka membuat masker opasitas yang SolidColorBrush buruk; menggunakan setara dengan mengatur properti elemen atau visualOpacity.

Menggunakan Gradien sebagai Masker Opacity

Untuk membuat isian gradien, Anda menentukan dua atau beberapa penghentian gradien. Setiap perhentian gradien berisi menggambarkan warna dan posisi (lihat Melukis dengan Warna Solid dan Gambaran Umum Gradien untuk informasi selengkapnya tentang membuat dan menggunakan gradien). Prosesnya sama saat menggunakan gradien sebagai masker opasitas, kecuali itu, alih-alih memadukan warna, gradien masker opasitas memadukan nilai saluran alfa. Jadi warna aktual konten gradien tidak masalah; hanya saluran alfa, atau keburaman, dari setiap warna yang penting. Berikut adalah contohnya.

<!--With the opacity mask:--> 
<Image
  Width="200" Height="150"
  Source="sampleImages\Waterlilies.jpg"
  Margin="10"
  HorizontalAlignment="Left"
  Grid.Column="2" Grid.Row="3">
  <Image.OpacityMask>
    <LinearGradientBrush StartPoint="0.1,0.1" EndPoint="0.75,0.75">
      <LinearGradientBrush.GradientStops>
        <GradientStop Offset="0" Color="Black"/>
        <GradientStop Offset="1" Color="Transparent"/>
      </LinearGradientBrush.GradientStops>
    </LinearGradientBrush>
  </Image.OpacityMask>
</Image>

Menentukan Pemberhentian Gradien untuk Masker Opacity

Dalam contoh sebelumnya, warna Black yang ditentukan sistem digunakan sebagai warna awal gradien. Karena semua warna di Colors kelas, kecuali Transparent, sepenuhnya buram, mereka dapat digunakan untuk hanya menentukan warna awal untuk masker opasitas gradien.

Untuk kontrol tambahan atas nilai alfa saat menentukan masker opasitas, Anda dapat menentukan saluran alfa warna menggunakan notasi heksadesimal ARGB dalam markup atau menggunakan Color.FromScRgb metode .

Menentukan Keburaman Warna di "XAML"

Dalam Extensible Application Markup Language (XAML), Anda menggunakan notasi heksadesimal ARGB untuk menentukan keburaman warna individual. 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 sepenuhnya buram, sementara yang kedua benar-benar transparan.

<Canvas.OpacityMask>
  <RadialGradientBrush>
    <RadialGradientBrush.GradientStops>
      <GradientStop Offset="0" Color="#FF000000"/>
      <GradientStop Offset="1" Color="#00000000"/>
  </RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</Canvas.OpacityMask>

Menggunakan Gambar sebagai Masker Opasitas

Gambar juga dapat digunakan sebagai masker opasitas. Gambar berikut ini memperlihatkan contoh kueri DNS. Latar belakang kotak-kotak digunakan untuk menunjukkan bagian transparan dari masker.

An object with an ImageBrush opacity mask
Contoh masking opasitas

Untuk menggunakan gambar sebagai masker opasitas, gunakan ImageBrush untuk berisi gambar. Saat membuat gambar yang akan digunakan sebagai masker opasitas, simpan gambar dalam format yang mendukung beberapa tingkat transparansi, seperti Portable Network Graphics (PNG). Contoh berikut menunjukkan kode yang digunakan untuk membuat ilustrasi sebelumnya.

<!-- With the Opacity Mask-->
<Image
  Height="150"
  Width="200"
  Source="sampleImages/Waterlilies.jpg"
  HorizontalAlignment="Left"
  Margin="10"
  Grid.Column="2" Grid.Row="1">
  <Image.OpacityMask>
    <ImageBrush ImageSource="sampleImages/tornedges.png"/>
  </Image.OpacityMask>
</Image>

Menggunakan Gambar Berjenjang sebagai Masker Opasitas

Dalam contoh berikut, gambar yang sama digunakan dengan yang lain ImageBrush, tetapi fitur petak peta sikat digunakan untuk menghasilkan petak peta gambar 50 piksel persegi.

<!-- With the Opacity Mask -->
<Image
  Height="150"
  Width="200"
  Source="sampleImages/Waterlilies.jpg"
  HorizontalAlignment="Left"
  Margin="10"
  Grid.Column="2" Grid.Row="2">

  <Image.OpacityMask>
    <ImageBrush
      Viewport="0,0,50,50"
      ViewportUnits="Absolute"
      TileMode="Tile" 
      ImageSource="sampleImages/tornedges.png"/>
  </Image.OpacityMask>
</Image>

Membuat Masker Opacity dari Gambar

Gambar dapat digunakan masker opasitas. Bentuk yang terkandung dalam gambar dapat diisi dengan gradien, warna solid, gambar, atau bahkan gambar lainnya. Gambar berikut menunjukkan contoh gambar yang digunakan sebagai masker opasitas. Latar belakang kotak-kotak digunakan untuk menunjukkan bagian transparan dari masker.

An object with a DrawingBrush opacity mask
Contoh masking opacity DrawingBrush

Untuk menggunakan gambar sebagai masker opasitas, gunakan DrawingBrush untuk berisi gambar. Contoh berikut menunjukkan kode yang digunakan untuk membuat ilustrasi sebelumnya:

<!-- With the Opacity Mask-->
<Image 
      Grid.Row="4" Grid.Column="5"
      Height="150"
      Width="200"
      Source="sampleImages/Waterlilies.jpg">
  <Image.OpacityMask>
    <DrawingBrush>
      <DrawingBrush.Drawing>
        <GeometryDrawing>
          <GeometryDrawing.Brush>
            <RadialGradientBrush>
              <RadialGradientBrush.GradientStops>
                <GradientStop Offset="0" Color="Black" />
                <GradientStop Offset="1" Color="Transparent" />
              </RadialGradientBrush.GradientStops>
            </RadialGradientBrush>
          </GeometryDrawing.Brush>
          <GeometryDrawing.Geometry>
            <RectangleGeometry Rect="0.05,0.05 0.9,0.9" />
          </GeometryDrawing.Geometry>
          <GeometryDrawing.Pen>
            <Pen Thickness="0.1" Brush="Black" />
          </GeometryDrawing.Pen>
        </GeometryDrawing>
      </DrawingBrush.Drawing>
    </DrawingBrush>
  </Image.OpacityMask>
</Image>

Menggunakan Gambar Ubin sebagai Masker Keburaman

ImageBrushSeperti , DrawingBrush dapat dibuat untuk memiringkan gambarnya. Dalam contoh berikut, kuas gambar digunakan untuk membuat masker opasitas keramik.

<!-- With the Opacity Mask-->
<Button
   Grid.Row="8" Grid.Column="5"
  Height="100"
  Width="200"
  FontFamily="MS Gothic"
  FontSize="16">
  A Button
  <Button.OpacityMask>
    <DrawingBrush Viewport="0,0,0.25,0.25" TileMode="Tile">
      <DrawingBrush.Drawing>
        <GeometryDrawing>
          <GeometryDrawing.Brush>
            <RadialGradientBrush>
              <RadialGradientBrush.GradientStops>
                <GradientStop Offset="0" Color="Black" />
                <GradientStop Offset="1" Color="Transparent" />
              </RadialGradientBrush.GradientStops>
            </RadialGradientBrush>
          </GeometryDrawing.Brush>
          <GeometryDrawing.Geometry>
            <RectangleGeometry Rect="0.05,0.05 0.9,0.9" />
          </GeometryDrawing.Geometry>
          <GeometryDrawing.Pen>
            <Pen Thickness="0.1" Brush="Black" />
          </GeometryDrawing.Pen>
        </GeometryDrawing>
      </DrawingBrush.Drawing>
    </DrawingBrush>
  </Button.OpacityMask>
</Button>

Bagikan melalui