불투명 마스크 개요

아티클
08/10/2011

불투명 마스크를 사용하면 요소나 시각적 표시의 일부를 투명 또는 부분 투명하게 만들 수 있습니다. 불투명 마스크를 만들려면 Visual 또는 요소의 OpacityMask 속성에 Brush를 적용합니다. 브러시는 요소 또는 시각적 표시에 매핑되며 각 브러시 픽셀의 불투명도 값은 요소 또는 시각적 표시의 각 해당 픽셀에 대한 결과 불투명도를 결정하는 데 사용됩니다.

이 항목에는 다음 단원이 포함되어 있습니다.

사전 요구 사항
불투명 마스크를 사용하여 시각적 효과 만들기
불투명 마스크 만들기
그라데이션을 불투명 마스크로 사용
불투명 마스크에 그라데이션 중지점 지정
이미지를 불투명 마스크로 사용
그리기에서 불투명 마스크 만들기
관련 항목

사전 요구 사항

이 개요에서는 Brush 개체에 익숙하다고 가정합니다. 브러시 사용에 대한 소개는 단색 및 그라데이션을 사용한 그리기 개요를 참조하십시오. ImageBrush 및 DrawingBrush에 대한 자세한 내용은 이미지, 그림 및 시각적 표시로 그리기를 참조하십시오.

불투명 마스크를 사용하여 시각적 효과 만들기

불투명 마스크는 해당 콘텐츠를 요소나 시각적 표시에 매핑하여 작동합니다. 그런 다음 각 브러시 픽셀의 알파 채널은 요소 또는 시각적 표시의 해당 픽셀에 대한 결과 불투명도를 결정하는 데 사용됩니다. 브러시의 실제 색은 무시됩니다. 브러시의 지정된 부분이 투명한 경우 요소 또는 시각적 표시의 해당 부분이 투명하게 됩니다. 브러시의 지정된 부분이 불투명한 경우 요소 또는 시각적 표시의 해당 부분은 변경되지 않습니다. 불투명 마스크에 의해 지정된 불투명도는 요소나 시각적 표시에 있는 모든 불투명도 설정과 결합됩니다. 예를 들어 요소가 25% 불투명하고 완전 불투명에서 완전 투명으로 전환되는 불투명 마스크가 적용될 경우 결과적으로 25% 불투명도에서 완전 투명으로 전환되는 요소가 됩니다.

참고
이 개요의 예제에서는 이미지 요소에 불투명 마스크를 사용하는 방법을 설명하지만 패널 및 컨트롤을 비롯한 모든 요소 또는 Visual에 불투명 마스크를 적용할 수도 있습니다.

불투명 마스크는 뷰에서 점차 사라지는 이미지 또는 단추를 만들거나 요소에 질감을 추가하거나 그라데이션을 결합하여 유리 같은 표면을 만드는 경우처럼 흥미로운 시각적 효과를 만드는 데 사용됩니다. 다음 그림에서는 불투명 마스크의 사용을 보여 줍니다. 마스크의 투명한 부분을 표시하기 위해 바둑판 배경이 사용됩니다.

불투명 마스크 샘플

LinearGradientBrush 불투명도 마스크가 있는 개체

불투명 마스크 만들기

불투명 마스크를 만들려면 Brush를 만들고 요소 또는 시각적 표시의 OpacityMask 속성에 적용합니다. 모든 형식의 Brush를 불투명 마스크로 사용할 수 있습니다.

LinearGradientBrush, RadialGradientBrush: 요소나 시각적 표시를 뷰에서 개체가 점차 사라지도록 만드는 데 사용됩니다.

다음 이미지에서는 불투명 마스크로 사용된 LinearGradientBrush를 보여 줍니다.

LinearGradientBrush 불투명 마스크 예제
ImageBrush: 질감과 부드러운 또는 찢어진 가장자리 효과를 만드는 데 사용됩니다.

다음 이미지에서는 불투명 마스크로 사용된 ImageBrush를 보여 줍니다.

LinearGradientBrush 불투명 마스크 예제
DrawingBrush: 도형, 이미지 및 그라데이션의 패턴에서 복잡한 불투명 마스크를 만드는 데 사용됩니다.

다음 이미지에서는 불투명 마스크로 사용된 DrawingBrush를 보여 줍니다.

DrawingBrush 불투명 마스크 예제

그라데이션 브러시(LinearGradientBrush 및 RadialGradientBrush)는 특히 불투명 마스크로 사용하기에 적합합니다. SolidColorBrush는 영역을 균일한 색으로 채우므로 제한된 불투명 마스크를 만듭니다. SolidColorBrush를 사용하는 것은 요소 또는 시각적 표시의 OpacityMask 속성을 설정하는 것과 같습니다.

그라데이션을 불투명 마스크로 사용

그라데이션 채우기를 만들려면 둘 이상의 그라데이션 중지점을 지정합니다. 각 그라데이션 중지점은 색과 위치를 설명합니다. 그라데이션 만들기 및 사용에 대한 자세한 내용은 단색 및 그라데이션을 사용한 그리기 개요를 참조하십시오. 혼합 색 대신에 불투명 마스크 그라데이션이 알파 채널 값을 혼합한다는 점을 제외하고 그라데이션을 불투명 마스크로 사용할 때와 프로세스가 동일합니다. 따라서 그라데이션 콘텐츠의 실제 색은 중요하지 않으며 각 색의 알파 채널 또는 불투명도만 중요합니다. 예를 들면 다음과 같습니다.

<!--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 클래스의 모든 색이 완전히 불투명하므로 단순히 그라데이션 불투명 마스크의 시작 색을 정의하기 위해 이러한 색을 사용할 수 있습니다.

불투명 마스크를 정의할 때 알파 값을 추가로 제어하기 위해 태그에서 ARGB 16진수 표기법을 사용하거나 Color.FromScRgb 메서드를 사용하여 색의 알파 채널을 지정할 수 있습니다.

"XAML"에서 색 불투명도 지정

Extensible Application Markup Language (XAML)에서는 ARGB 16진수 표기법을 사용하여 개별 색의 불투명도를 지정합니다. ARGB 16진수 표기법에는 다음 구문이 사용됩니다.

#aarrggbb

위 줄에서 aa는 색의 불투명도를 지정하는 데 사용되는 2자리 16진수 값을 나타냅니다. rr, gg 및 bb는 각각 색에서 빨간색, 녹색 및 파란색의 양을 지정하는 데 사용되는 2자리 16진수 값을 나타냅니다. 각 16진수는 0-9 또는 A-F의 값을 가집니다. 0이 가장 작은 값이고 F가 가장 큰 값입니다. 알파 값이 00이면 색이 완전히 투명해지고 알파 값이 FF이면 색이 완전히 불투명해집니다. 다음 예제에서는 두 개의 색을 지정하기 위해 16진수 ARGB 표기법이 사용됩니다. 첫 번째는 완전히 불투명하고 두 번째는 완전히 투명합니다.

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

이미지를 불투명 마스크로 사용

이미지를 불투명 마스크로 사용할 수도 있습니다. 다음 이미지에서는 예제를 보여 줍니다. 마스크의 투명한 부분을 표시하기 위해 바둑판 배경이 사용됩니다.

불투명 마스크 샘플

ImageBrush 불투명도 마스크가 있는 개체

이미지를 불투명 마스크로 사용하려면 ImageBrush를 사용하여 이미지를 포함합니다. 불투명 마스크로 사용할 이미지를 만들 때 Portable Network Graphics (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>

그리기에서 불투명 마스크 만들기

그리기를 불투명 마스크로 사용할 수 있습니다. 그리기 내에 포함된 도형을 그라데이션, 단색, 이미지 또는 심지어 다른 그리기로 채울 수 있습니다. 다음 이미지에서는 불투명 마스크로 사용된 그리기의 예제를 보여 줍니다. 마스크의 투명한 부분을 표시하기 위해 바둑판 배경이 사용됩니다.

DrawingBrush 불투명 마스크 예제

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>

참고 항목

개념

이미지, 그림 및 시각적 표시로 그리기

단색 및 그라데이션을 사용한 그리기 개요

다음을 통해 공유