Share via

不透明マスクの概要

  • [アーティクル]

不透明マスクを使用すると、要素またはビジュアルの一部分を透明または部分的に透明にすることができます。 不透明マスクを作成するには、要素または Visual の OpacityMask プロパティに Brush を適用します。 ブラシは要素またはビジュアルにマップされ、各ブラシのピクセルの不透明度の値を使用して、要素またはビジュアルの対応する各ピクセルの不透明度が決定されます。

このトピックは、次のセクションで構成されています。

  • 必要条件

  • 不透明マスクを用いた視覚効果の作成

  • 不透明マスクの作成

  • 不透明マスクとしてのグラデーションの使用

  • 不透明マスクでのグラデーションの終了位置の指定

  • 不透明マスクとしてのイメージの使用

  • 描画から不透明マスクを作成

  • 関連トピック

必要条件

この概要では、Brush オブジェクトに精通していることを前提にしています。 ブラシの使用の概要については、「純色およびグラデーションによる塗りつぶしの概要」を参照してください。 ImageBrush と DrawingBrush の詳細については、「イメージ、描画、およびビジュアルによる塗りつぶし」を参照してください。

不透明マスクを用いた視覚効果の作成

不透明マスクは、そのコンテンツを要素またはビジュアルにマップすることによって機能します。 さらに、ブラシの各ピクセルのアルファ チャネルを使用して、要素またはビジュアルの対応するピクセルの不透明度を決定します。ブラシの実際の色は無視されます。 ブラシの指定された部分が透明の場合、要素またはビジュアルの対応する部分は透明になります。 ブラシの指定された部分が不透明の場合、要素またはビジュアルの対応する部分の不透明度は変更されません。 不透明マスクによって指定される不透明度は、要素またはビジュアル内に含まれている不透明度の設定と結合されます。 たとえば、不透明度 25% の要素に、完全に不透明から完全に透明まで遷移する不透明マスクが適用された場合、要素は 25% の不透明度から完全な透明まで遷移します。

メモメモ

この概要では、イメージ要素で不透明マスクを使用する例を示していますが、不透明マスクはパネルやコントロールなどの任意の要素または Visual に適用できます。

不透明マスクを使用すると、ビューから消えるイメージまたはボタンを作成する、要素にテクスチャを追加する、あるいはグラデーションを組み合わせてガラスのような表面を生成するなど、人の目をひく視覚効果を作成できます。 不透明マスクの使用方法を次の図に示します。 格子模様の背景はマスクの透過部分を表しています。

不透明マスクの例

LinearGradientBrush 不透明マスクを持つオブジェクト

不透明マスクの作成

不透明マスクを作成するには、Brush を作成し、要素またはビジュアルの OpacityMask プロパティに適用します。 任意の種類の Brush を不透明マスクとして使用できます。

  • LinearGradientBrush、RadialGradientBrush : 要素またはビジュアルをビューから消すために使用します。

    次の例は、不透明マスクとして使用された LinearGradientBrush を示しています。

    LinearGradientBrush 不透明マスクの例

    LinearGradientBrush 不透明マスクを持つオブジェクト

  • ImageBrush : ぼかし、またはぎざぎざのエッジ効果を作成するために使用します。

    次の例は、不透明マスクとして使用された ImageBrush を示しています。

    LinearGradientBrush 不透明マスクの例

    ImageBrush 不透明マスクを持つオブジェクト

  • DrawingBrush : 図形、イメージ、およびグラデーションのパターンから複雑な不透明マスクを作成する場合に使用します。

    次の例は、不透明マスクとして使用された 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 表記を使用した 2 種類の色の指定方法を示します。 1 つ目には完全に不透明な色を指定し、2 つ目には完全に透明な色を指定しています。

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

参照

概念

イメージ、描画、およびビジュアルによる塗りつぶし

純色およびグラデーションによる塗りつぶしの概要