写真をぼかす Part.4.1 マスク画像を使わずに周辺だけをぼかす。

#wp7dev_jp

さて、前々回作ったアプリにマスクの機能をつけます。つまり、画面全部をぼかすのではなく画面の一部をぼかします。

前回、OpacityMask を使って、マスク画像でぼかしました。

今回はマスク画像を使わずに行います。

方法１

画像も使わずに、C#のコードも使わずにやる方法

要は Opacity Mask を作ればいいだけで、グラデーションブラシで実装すると一番簡単。

なので、実は前々回作ったアプリに下のグラデーションブラシの Opacity Maskを追加するだけで同じ効果が作れます。

 <Grid x:Name="LayoutRoot" Background="Transparent">

    <Grid x:Name="ContentPanel" >

        <Image Name="sourceimg" Stretch="UniformToFill" Height="480" />

        <Image Name="resultimg" Stretch="UniformToFill" Height="480">

            <!-- グラデーションブラシのOpacity Mask -->

            <Image.OpacityMask>

                <RadialGradientBrush>

                    <GradientStop Color="#00000000" Offset="0.3" />

                    <GradientStop Color="Black" Offset="1" />

                </RadialGradientBrush>

            </Image.OpacityMask>

            <!-- ここまで -->

        </Image>

        <Slider  Name="radius" VerticalAlignment="Bottom" Minimum="0" Value="5" />

    </Grid>

</Grid>

ね？

方法 2

画像も使わずに、C#のコードだけでやる方法

Opacity Mask を XAMLではなく、C#で書くこともできます。

前々回作ったアプリに下のマスク作成のコードだけを追加してOKです。

     //透明度マスク作成・適応

    GradientStopCollection gradient = new GradientStopCollection();

    gradient.Add(new GradientStop() { Color = Color.FromArgb(0, 0, 0, 0), Offset = 0.3 });

    gradient.Add(new GradientStop() { Color = Colors.Black, Offset = 1 });

    RadialGradientBrush maskbrush = new RadialGradientBrush(gradient);

    resultimg.OpacityMask = maskbrush;

    //処理時間表示

    MessageBox.Show((DateTime.Now - start).TotalSeconds.ToString() + " sec");

もちろん方１と同じ結果です。

この場合のメリットは、マスク画像をプログラムでコントロールできることですね。

Additional resources