Udostępnij za pośrednictwem

Przegląd Masek krycia

  • Artykuł

Maski nieprzezroczystości umożliwiają tworzenie części elementu lub wizualizacji albo przezroczystej, albo częściowo przezroczystej. Aby utworzyć maskę nieprzezroczystości, należy zastosować element Brush do OpacityMask właściwości elementu lub Visual. Szczotka jest mapowana na element lub wizualizację, a wartość nieprzezroczystości każdego piksela pędzla służy do określenia wynikowej nieprzezroczystości każdego odpowiadającego piksela elementu lub wizualizacji.

Wymagania wstępne

W tym omówieniu założono, że znasz Brush obiekty. Aby zapoznać się z wprowadzeniem do używania pędzli, zobacz Malowanie za pomocą kolorów stałych i gradientów — omówienie. Aby uzyskać informacje o systemach ImageBrush i DrawingBrush, zobacz Malowanie za pomocą obrazów, rysunków i wizualizacji.

Tworzenie efektów wizualnych za pomocą masek nieprzezroczystości

Maska nieprzezroczystości działa, mapując jego zawartość na element lub wizualizację. Kanał alfa każdego piksela pędzla jest następnie używany do określania wynikowej nieprzezroczystości elementu lub odpowiadającej wizualizacji pikseli; rzeczywisty kolor pędzla jest ignorowany. Jeśli dana część pędzla jest przezroczysta, odpowiednia część elementu lub wizualizacji staje się przezroczysta. Jeśli dana część pędzla jest nieprzezroczysta, nieprzezroczystość odpowiadającej jej części elementu lub wizualizacji pozostaje niezmieniona. Nieprzezroczystość określona przez maskę nieprzezroczystości jest połączona z dowolnymi ustawieniami nieprzezroczystości istniejącymi w elementu lub wizualizacji. Jeśli na przykład element ma 25 procent nieprzezroczystości, a maska nieprzezroczystości jest stosowana, która przechodzi z pełnej nieprzezroczystości do w pełni przezroczystej, wynik jest elementem, który przechodzi z nieprzezroczystości 25 procent do w pełni przezroczystości.

Uwaga

Chociaż w przykładach w tym omówieniu pokazano użycie masek nieprzezroczystości na elementach obrazu, maska nieprzezroczystości może być stosowana do dowolnego elementu lub Visual, w tym paneli i kontrolek.

Maski nieprzezroczystości służą do tworzenia interesujących efektów wizualnych, takich jak tworzenie obrazów lub przycisków, które zanikają z widoku, dodawanie tekstur do elementów lub łączenie gradientów w celu produkcji powierzchni przypominających szkło. Na poniższej ilustracji przedstawiono użycie maski nieprzezroczystości. Tło sprawdzania służy do pokazywania przezroczystych części maski.

Obiekt z maską nieprzezroczystości LinearGradientBrush
Przykład maskowania nieprzezroczystości

Tworzenie maski nieprzezroczystości

Aby utworzyć maskę nieprzezroczystości, należy utworzyć obiekt Brush i zastosować go do OpacityMask właściwości elementu lub wizualizacji. Możesz użyć dowolnego typu Brush maski nieprzezroczystości.

  • LinearGradientBrush, RadialGradientBrush: służy do tworzenia elementu lub wizualizacji zanikać z widoku.

    Na poniższej ilustracji przedstawiono maskę LinearGradientBrush nieprzezroczystości używaną jako maska nieprzezroczystości.

    Obiekt z maską nieprzezroczystości LinearGradientBrush
    Przykład maskowania nieprzezroczystości LinearGradientBrush

  • ImageBrush: służy do tworzenia tekstury i miękkich lub rozdartych efektów krawędziowych.

    Na poniższej ilustracji przedstawiono maskę ImageBrush nieprzezroczystości używaną jako maska nieprzezroczystości.

    Obiekt, który ma maskę nieprzezroczystości ImageBrush
    Przykład maskowania nieprzezroczystości LinearGradientBrush

  • DrawingBrush: służy do tworzenia złożonych masek nieprzezroczystości na podstawie wzorców kształtów, obrazów i gradientów.

    Na poniższej ilustracji przedstawiono maskę DrawingBrush nieprzezroczystości używaną jako maska nieprzezroczystości.

    Obiekt z maską nieprzezroczystości rysunkuBrush
    Przykład maskowania nieprzezroczystości rysunkuBrush

Szczotki gradientowe (LinearGradientBrush i RadialGradientBrush) są szczególnie odpowiednie do użycia jako maska nieprzezroczystości. SolidColorBrush Ponieważ obszar wypełnia jednolity kolor, sprawiają, że słabe maski nieprzezroczystości; użycie elementu SolidColorBrush jest równoważne ustawieniu właściwości elementu lub wizualizacjiOpacity.

Używanie gradientu jako maski nieprzezroczystości

Aby utworzyć wypełnienie gradientowe, należy określić co najmniej dwa przystanki gradientu. Każdy przystanek gradientu zawiera opis koloru i położenia (zobacz Malowanie za pomocą kolorów stałych i gradientów — omówienie , aby uzyskać więcej informacji na temat tworzenia gradientów i używania gradientów). Proces jest taki sam w przypadku używania gradientu jako maski nieprzezroczystości, z tą różnicą, że zamiast mieszać kolory, gradient maski nieprzezroczystości miesza wartości kanału alfa. Rzeczywisty kolor zawartości gradientu nie ma znaczenia; tylko kanał alfa lub nieprzezroczystość każdego koloru ma znaczenie. Poniżej przedstawiono przykład.

<!--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>

Określanie zatrzymań gradientu dla maski nieprzezroczystości

W poprzednim przykładzie kolor zdefiniowany przez system jest używany jako kolor Black początkowy gradientu. Ponieważ wszystkie kolory w Colors klasie, z wyjątkiem Transparent, są w pełni nieprzezroczyste, można ich użyć do po prostu zdefiniowania koloru początkowego maski nieprzezroczystości gradientu.

Aby uzyskać dodatkową kontrolę nad wartościami alfa podczas definiowania maski nieprzezroczystości, można określić kanał alfa kolorów przy użyciu notacji szesnastkowej ARGB w adiustacji lub przy użyciu Color.FromScRgb metody .

Określanie nieprzezroczystości kolorów w języku "XAML"

W rozszerzalnym języku znaczników aplikacji (XAML) używasz notacji szesnastkowej ARGB, aby określić nieprzezroczystość poszczególnych kolorów. Notacja szesnastkowa ARGB używa następującej składni:

#Aa rrggbb

Wartość aa w poprzednim wierszu reprezentuje dwucyfrową wartość szesnastkową używaną do określenia nieprzezroczystości koloru. Każda wartość szesnastkowa rr, gg i bb reprezentują dwie cyfry szesnastkowe używane do określania ilości koloru czerwonego, zielonego i niebieskiego. Każda cyfra szesnastkowa może mieć wartość z zakresu od 0 do 9 lub A-F. 0 jest najmniejszą wartością, a F jest największa. Wartość alfa 00 określa kolor całkowicie przezroczysty, podczas gdy wartość alfa FF tworzy kolor, który jest w pełni nieprzezroczysty. W poniższym przykładzie szesnastkowa notacja ARGB służy do określania dwóch kolorów. Pierwszy jest w pełni nieprzezroczysty, podczas gdy drugi jest całkowicie przezroczysty.

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

Używanie obrazu jako maski nieprzezroczystości

Obrazy mogą być również używane jako maska nieprzezroczystości. Na poniższym obrazie przedstawiono przykład. Tło sprawdzania służy do pokazywania przezroczystych części maski.

Obiekt z maską nieprzezroczystości ImageBrush
Przykład maskowania nieprzezroczystości

Aby użyć obrazu jako maski nieprzezroczystości, użyj elementu , ImageBrush aby zawierać obraz. Podczas tworzenia obrazu, który ma być używany jako maska nieprzezroczystości, zapisz obraz w formacie, który obsługuje wiele poziomów przezroczystości, takich jak Portable Network Graphics (PNG). W poniższym przykładzie pokazano kod użyty do utworzenia poprzedniej ilustracji.

<!-- 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>

Używanie obrazu kafelka jako maski nieprzezroczystości

W poniższym przykładzie ten sam obraz jest używany z innym ImageBrush, ale funkcje tiling pędzla są używane do tworzenia kafelków obrazu 50 pikseli kwadratowych.

<!-- 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>

Tworzenie maski nieprzezroczystości na podstawie rysunku

Rysunki mogą służyć do maski nieprzezroczystości. Kształty zawarte na rysunku mogą być wypełnione gradientami, kolorami stałymi, obrazami, a nawet innymi rysunkami. Na poniższej ilustracji przedstawiono przykład rysunku używanego jako maska nieprzezroczystości. Tło sprawdzania służy do pokazywania przezroczystych części maski.

Obiekt z maską nieprzezroczystości DrawingBrush
Przykład maskowania nieprzezroczystości rysunkuBrush

Aby użyć rysunku jako maski nieprzezroczystości, użyj elementu , DrawingBrush aby zawierać rysunek. Poniższy przykład przedstawia kod użyty do utworzenia poprzedniej ilustracji:

<!-- 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>

Używanie rysunku kafelka jako maski nieprzezroczystości

Podobnie jak w DrawingBrush przypadku ImageBrushelementu , element można utworzyć na kafelku na rysunku. W poniższym przykładzie szczotka rysunkowa służy do tworzenia maski nieprzezroczystości kafelków.

<!-- 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>

Zobacz też