不透明蒙板概述

项目
05/04/2023

不透明蒙板能够使部分元素或视觉对象透明或部分透明。要创建不透明蒙版，请将 Brush 应用于元素或 Visual 的 OpacityMask 属性。画笔映射到元素或视觉对象，并且画笔的每个像素的不透明度值用于确定生成的元素或视觉对象的每个相应像素的不透明度。

先决条件

本概述假定用户熟悉 Brush 对象。有关使用画笔的介绍，请参阅使用纯色和渐变进行绘制概述。有关 ImageBrush 和 DrawingBrush 的信息，请参阅使用图像、绘图和视觉对象进行绘制。

使用不透明蒙板创建视觉效果

不透明蒙板的工作原理是将其内容映射到元素或视觉对象。画笔像素的 alpha 通道则用于确定生成的元素或视觉对象相应像素的不透明度；将忽略画笔的实际颜色。如果画笔的指定部分是透明的，则元素或视觉对象的相应部分将变为透明。如果画笔的指定部分是不透明的，则元素或视觉对象的相应部分未改变。不透明蒙板指定的不透明度与元素或视觉对象呈现的任何不透明度设置相结合。例如：如果某个元素的不透明度是 25% 并且从完全不透明过渡完全透明时应用不透明蒙板，结果是元素从 25% 的不透明过渡到完全透明。

注意

虽然此概述中的示例只演示了不透明蒙板在图像元素上的应用，但是，不透明蒙板可以应用到任何元素或 Visual，包括面板和控件。

不透明蒙板用于创建有趣的视觉效果，如创建从视图淡入淡出的图像或按钮、向元素添加纹理或结合渐变产生玻璃般的图面。以下图示演示了不透明蒙板的使用。棋盘格的背景用于显示蒙板的透明部分。

Object with a LinearGradientBrush opacity mask
不透明蒙板示例

创建不透明蒙板

要创建不透明蒙版，请创建 Brush 并将其应用于元素或视觉对象的 OpacityMask 属性。可以使用任何类型的 Brush 作为不透明蒙版。

LinearGradientBrush、RadialGradientBrush：用于使元素或视觉对象从视图中淡出。

下面的图像显示了用作不透明蒙板的 LinearGradientBrush。

LinearGradientBrush 不透明蒙板示例
ImageBrush：用于创建纹理和软或撕裂边缘效果。

下面的图像显示了用作不透明蒙板的 ImageBrush。

LinearGradientBrush 不透明蒙板示例
DrawingBrush：用于从形状、图像和渐变的模式创建复杂的不透明蒙板。

下面的图像显示了用作不透明蒙板的 DrawingBrush。

DrawingBrush 不透明蒙板示例

渐变画笔（LinearGradientBrush 和 RadialGradientBrush）特别适合用作不透明蒙板。因为 SolidColorBrush 用统一颜色填充区域，不透明蒙板效果差；使用 SolidColorBrush 等效于设置元素或视觉对象的 Opacity 属性。

将渐变用作不透明蒙板

要创建渐变填充，请指定两个或多个梯度停止点。每个渐变停止点包含描述一种颜色和位置（请参阅使用纯色和渐变进行绘制概述了解关于创建和使用渐变的更多信息）。将渐变用作不透明蒙板时，除非不使用混合颜色，由不透明蒙板渐变混合 alpha 通道值，否则过程相同。因此，渐变内容的实际颜色并不重要；只有 alpha 通道或每种颜色的不透明度很重要。下面是一个示例。

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

为不透明蒙板指定梯度停止点

在前面的示例中，系统定义的颜色 Black 用作渐变的开始颜色。因为除 Transparent 之外，Colors 类中的所有颜色都为完全不透明，可使用它们为渐变不透明蒙板简单定义开始颜色。

若要在定义不透明蒙板时附加控制 Alpha 值，可使用标记中的 ARGB 十六进制表示法或 Color.FromScRgb 方法指定颜色的 alpha 通道。

在“XAML”中指定颜色不透明度

在 Extensible Application Markup Language (XAML) 中，使用 ARGB 十六进制表示法指定各个颜色的不透明度。 ARGB 十六进制表示法使用下面的语法：

#aarrggbb

上一行中的 aa 表示用于指定颜色不透明度的两位十六进制值。 rr、gg 和 bb 分别表示用于指定颜色中的红色、绿色和蓝色量的两位十六进制值。每个十六进制数字介于 0-9 或 A-F 之间。 0 是最小值，F 是最大值。 00 的 alpha 值指定完全透明的颜色，而 FF 的 alpha 值创建完全不透明的颜色。在下面的示例中，十六进制 ARGB 表示法用于指定两种颜色。第一种为完全不透明色，第二种为完全透明色。

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

将图像用作不透明蒙板

图像也可以用作不透明蒙板。下图展示了一个示例。棋盘格的背景用于显示蒙板的透明部分。

An object with an ImageBrush opacity mask
不透明蒙板示例

要将图像用作不透明蒙板，请使用 ImageBrush 包含图像。创建要用作不透明蒙板的图像时，以支持多级别不透明度的格式保存图像，例如可移植网络图形格式 (PNG)。下面的示例显示了用于创建上图的代码。

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

将平铺图像用作不透明蒙板

在下面的示例中，同一图像与另一 ImageBrush 一起使用，但是画笔的平铺功能用于生成 50 像素正方形的图像平铺。

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

通过图形创建不透明蒙板

图形可用作不透明蒙板。图形中包含的形状可使用渐变、纯色、图像或甚至其他图形来填充它们自己。下面的图像显示了图形用作不透明蒙板的示例。棋盘格的背景用于显示蒙板的透明部分。

An object with a DrawingBrush opacity mask
DrawingBrush 不透明蒙板示例

要将绘图用作不透明蒙板，请使用 DrawingBrush 包含绘图。下面的示例显示了用于创建上图的代码：

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

将平铺图形用作不透明蒙板

与 ImageBrush 一样，DrawingBrush 可以平铺其绘图。在下面的示例中，图形画笔用于创建平铺的不透明蒙板。

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