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


#wp7dev_jp

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

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

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

 

方法 1

画像も使わずに、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>

ね?

image_thumb[5]

方法 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");
}

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

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

Comments (0)

Skip to main content