mikeo_410

BitmapEffect

  Silverlightで記述できないものに、BitmapEffect があります。まず、WPFアプリケーションでどんなものか理解しておきたいと思います。
  「XAML,WPF,Silverlight」「Silverlight」に書いたように、SilverlightでもPixel単位の操作は可能なので、必要ならフィルタを書くことが可能だと考えています。

  1. BlurBitmapEffect
    ぼかす効果
  2. OuterGlowBitmapEffect
    オブジェクトの外周をにじませる
  3. DropShadowBitmapEffect
    オブジェクトの背後に影を付ける
  4. BevelBitmapEffect
    べベル効果
  5. EmbossBitmapEffect
    エンボス効果

１．BlurBitmapEffect

  「ぼかす」で思いつくのは以下のようなことです。

  1. ピントが合っていない静止画像
  2. 半透明な物体を通して見ている
     (ガラス、プラスチック、水、霧、霞、スモッグ、硝煙、...)
  3. ノイズ除去のためのぼかし

  KernelType と Radius プロパティで調整するようです。
  Radiusは、計算に使う近傍のPixel数を決め、KernelTypeは各Pixelに乗ずる係数の値を決めるものだと思います。

  KernelTypeがGaussianで、Radiusが1は、3x3のガウス係数が使われるのだと解釈しました。

  KernelTypeがBoxと言うのは、ガウス係数を使う方法の近似法のようです。

２．OuterGlowBitmapEffect

  1. <Window x:Class="wpf_OuterGlowBitmapEffect1.Window1"
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.     Title="OuterGlowBitmapEffect" Height="300" Width="300" Background="Black" >
  5.     <Grid>
  6.         <Grid.RowDefinitions>
  7.             <RowDefinition Height="150"></RowDefinition>
  8.             <RowDefinition Height="150"></RowDefinition>
  9.         </Grid.RowDefinitions>
  10.         <Grid.ColumnDefinitions>
  11.             <ColumnDefinition Width="150"></ColumnDefinition>
  12.             <ColumnDefinition Width="150"></ColumnDefinition>
  13.         </Grid.ColumnDefinitions>
  14.         <Canvas Grid.Row="0" Grid.Column="0">
  15.             <TextBlock Canvas.Left="15" Canvas.Top="40" Width="120" Foreground="White" Text="Noise:1.0 Opacity:1.0">
  16.             <TextBlock.BitmapEffect>
  17.                 <OuterGlowBitmapEffect GlowSize="30" GlowColor="Magenta" Noise="1" Opacity="1"/>
  18.             </TextBlock.BitmapEffect>
  19.             </TextBlock>
  20.         </Canvas>
  21.         <Canvas Grid.Row="1" Grid.Column="0">
  22.             <TextBlock Canvas.Left="15" Canvas.Top="40" Width="120" Foreground="White" Text="Noise:0.3 Opacity:1.0">
  23.             <TextBlock.BitmapEffect>
  24.                 <OuterGlowBitmapEffect GlowSize="30" GlowColor="Magenta" Noise="0.3" Opacity="1"/>
  25.             </TextBlock.BitmapEffect>
  26.             </TextBlock>
  27.         </Canvas>
  28.         <Canvas Grid.Row="0" Grid.Column="1">
  29.             <TextBlock Canvas.Left="15" Canvas.Top="40" Width="120" Foreground="White" Text="Noise:1.0 Opacity:0.5">
  30.             <TextBlock.BitmapEffect>
  31.                 <OuterGlowBitmapEffect GlowSize="30" GlowColor="Magenta" Noise="1" Opacity="0.5"/>
  32.             </TextBlock.BitmapEffect>
  33.             </TextBlock>
  34.         </Canvas>
  35.         <Canvas Grid.Row="1" Grid.Column="1">
  36.             <TextBlock Canvas.Left="15" Canvas.Top="40" Width="120" Foreground="White" Text="Noise:0.3 Opacity:0.5">
  37.             <TextBlock.BitmapEffect>
  38.                 <OuterGlowBitmapEffect GlowSize="30" GlowColor="Magenta" Noise="0.3" Opacity="0.5"/>
  39.             </TextBlock.BitmapEffect>
  40.             </TextBlock>
  41.         </Canvas>
  42.     </Grid>
  43. </Window>

  Noise、Opacity で効果を制御します。
  付加されるノイズは、透明と言うことのようです。
  コントロールの外周の外側に効果が付けられるので、StackPanelなどでは GlowSize が考慮されません。GlowSize を考慮してコントロールの位置を指定する必要があります。

３．DropShadowBitmapEffect

  1. <Window x:Class="wpf_DropShadowBitmapEffect1.Window1"
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.     Title="DropShadowBitmapEffect" Height="300" Width="300">
  5.     <Grid>
  6.         <Grid.RowDefinitions>
  7.             <RowDefinition Height="100"></RowDefinition>
  8.             <RowDefinition Height="100"></RowDefinition>
  9.             <RowDefinition Height="100"></RowDefinition>
  10.         </Grid.RowDefinitions>
  11.         <Grid.ColumnDefinitions>
  12.             <ColumnDefinition Width="150"></ColumnDefinition>
  13.             <ColumnDefinition Width="150"></ColumnDefinition>
  14.         </Grid.ColumnDefinitions>
  15.         <Canvas Grid.Row="0" Grid.Column="0">
  16.             <TextBlock Canvas.Left="10" Canvas.Top="40" Width="120" Background="Tan" Text="ShadowDepth:10">
  17.             <TextBlock.BitmapEffect>
  18.                 <DropShadowBitmapEffect Direction="120" ShadowDepth="10" Softness="1" Opacity="1"/>
  19.             </TextBlock.BitmapEffect>
  20.             </TextBlock>
  21.         </Canvas>
  22.         <Canvas Grid.Row="1" Grid.Column="0">
  23.             <TextBlock Canvas.Left="10" Canvas.Top="40" Width="130" Background="Tan" Text="ShadowDepth:30">
  24.             <TextBlock.BitmapEffect>
  25.                 <DropShadowBitmapEffect Direction="120" ShadowDepth="30" Softness="1" Opacity="1"/>
  26.             </TextBlock.BitmapEffect>
  27.             </TextBlock>
  28.         </Canvas>
  29.         <Canvas Grid.Row="3" Grid.Column="0">
  30.             <TextBlock Canvas.Left="10" Canvas.Top="40" Width="130" Background="Tan" Text="Softness:0.5 Opacity:1.0">
  31.             <TextBlock.BitmapEffect>
  32.                 <DropShadowBitmapEffect Direction="120" ShadowDepth="30" Softness="0.5" Opacity="1"/>
  33.             </TextBlock.BitmapEffect>
  34.             </TextBlock>
  35.         </Canvas>
  36.         <Canvas Grid.Row="0" Grid.Column="1">
  37.             <TextBlock Canvas.Left="10" Canvas.Top="40" Width="130" Background="Tan" Text="Softness:0.0 Opacity:1.0">
  38.             <TextBlock.BitmapEffect>
  39.                 <DropShadowBitmapEffect Direction="120" ShadowDepth="30" Softness="0" Opacity="1"/>
  40.             </TextBlock.BitmapEffect>
  41.             </TextBlock>
  42.         </Canvas>
  43.         <Canvas Grid.Row="1" Grid.Column="1">
  44.             <TextBlock Canvas.Left="10" Canvas.Top="40" Width="130" Background="Tan" Text="Softness:0.0 Opacity:0.5">
  45.             <TextBlock.BitmapEffect>
  46.                 <DropShadowBitmapEffect Direction="120" ShadowDepth="30" Softness="0" Opacity="0.5"/>
  47.             </TextBlock.BitmapEffect>
  48.             </TextBlock>
  49.         </Canvas>
  50.         <Canvas Grid.Row="2" Grid.Column="1">
  51.             <TextBlock Canvas.Left="10" Canvas.Top="40" Width="130" Background="Tan" Text="Softness:0.5 Opacity:0.5">
  52.             <TextBlock.BitmapEffect>
  53.                 <DropShadowBitmapEffect Direction="120" ShadowDepth="30" Softness="0.5" Opacity="0.5"/>
  54.             </TextBlock.BitmapEffect>
  55.             </TextBlock>
  56.         </Canvas>
  57.     </Grid>
  58. </Window>

   Direction、ShadowDepth、Softness、Opacity で効果を制御します。
  コントロールの外側に効果が付けられるので、StackPanelなどでは、効果の表示部分が考慮されません。効果の描画部分を考慮してコントロールの位置を指定する必要があります。

４．BevelBitmapEffect

  この効果そのものは良く見かけるもので、ボタンなどのコントロールの内のりに影を描いて立体的に見せます。
  しかし、これがいつも良く理解できず、すっきりしません。

  1つ目の図は、凸なボタンに見えると思います。

  2つ目のボタンは、凹なボタンに見えると思います。

  この2つの図は、同じ図形で、上下を逆さにしてあります。

  この効果は、主観的な効果で見る方向や周りの状態で見え方が変わるもののようです。

  推測では、光が上から来るものとの前提が使われていて、凹凸の認識を左右しているものだろうと思います。
  下から光が来ているのだと言い聞かせながら2つ目の図を見ると凸なボタンに見えてきます。
  （モニタの表示も表示面を水平にすれば、どちらが上かは、単に認識の問題になる。「上」は何を意味するかも興味深い。）

  もう一つの疑問は、反対に、どちらから光が来ているかを図から判断していると言うことです。この場合、明るい暗いをどのように判定しているかです。グレースケールならあまり疑問はないのですが色を使って凹凸を表現できるのでしょうか。
  人の目は、明暗を感じる細胞と色を感じる細胞は個別に存在し、明暗を感じる細胞が多いと聞きました。グレースケールだと効果が高いと感じるのですが、凹凸の判断には明暗を感じる細胞の入力が使われてるのではと思います。

 

  この効果は、形状を矩形以外に変えた場合でもそれなりに機能するようです。

  ただし、外周から一律に処理されておらず、赤い部分と緑の部分の処理が異なっているように見えます。

  BevelBitmapEffect は、BevelWidth、EdgeProfile、Relief、Smoothness、LightAngle プロパティで効果を制御します。

５．EmbossBitmapEffect

  1. <Window x:Class="wpf_EmbossBitmapEffect1.Window1"
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.     Title="EmbossBitmapEffect" Height="420" Width="360">
  5.     <Window.Resources>
  6.         <BitmapImage x:Key="original" UriSource="eegonia_evansiana2.png"/>
  7.     </Window.Resources>
  8.     <Grid>
  9.         <Grid.RowDefinitions>
  10.             <RowDefinition Height="200"></RowDefinition>
  11.             <RowDefinition Height="200"></RowDefinition>
  12.         </Grid.RowDefinitions>
  13.         <Grid.ColumnDefinitions>
  14.             <ColumnDefinition Width="180"></ColumnDefinition>
  15.             <ColumnDefinition Width="180"></ColumnDefinition>
  16.         </Grid.ColumnDefinitions>
  17.         <Grid Grid.Row="0" Grid.Column="0">
  18.             <Image Source="{StaticResource original}">
  19.                 <Image.BitmapEffect>
  20.                     <EmbossBitmapEffect LightAngle="45" Relief="0"/>
  21.                 </Image.BitmapEffect>
  22.             </Image>
  23.             <TextBlock Margin="10" Foreground="White" FontWeight="Bold">LightAngle:45 Relief:0</TextBlock>
  24.         </Grid>
  25.         <Grid Grid.Row="1" Grid.Column="0">
  26.             <Image Source="{StaticResource original}">
  27.                 <Image.BitmapEffect>
  28.                     <EmbossBitmapEffect LightAngle="45" Relief="0.44"/>
  29.                 </Image.BitmapEffect>
  30.             </Image>
  31.             <TextBlock Margin="10" Foreground="White" FontWeight="Bold">LightAngle:45 Relief:0.44</TextBlock>
  32.         </Grid>
  33.         <Grid Grid.Row="0" Grid.Column="1">
  34.             <Image Source="{StaticResource original}">
  35.                 <Image.BitmapEffect>
  36.                     <EmbossBitmapEffect LightAngle="45" Relief="1"/>
  37.                 </Image.BitmapEffect>
  38.             </Image>
  39.             <TextBlock Margin="10" Foreground="White" FontWeight="Bold">LightAngle:45 Relief:1</TextBlock>
  40.         </Grid>
  41.         <Grid Grid.Row="1" Grid.Column="1">
  42.             <Image Source="{StaticResource original}">
  43.                 <Image.BitmapEffect>
  44.                     <EmbossBitmapEffect LightAngle="315" Relief="0.44"/>
  45.                 </Image.BitmapEffect>
  46.             </Image>
  47.             <TextBlock Margin="10" Foreground="White" FontWeight="Bold">LightAngle:315 Relief:0.44</TextBlock>
  48.         </Grid>
  49.     </Grid>
  50. </Window>

  Relief、LightAngle プロパティで効果を制御します。Reliefの値が小さいほど効果が大きいようです。
mikeo_410@hotmail.com