2013年04月25日

WPFサンプル:OpacityMaskを使用しイメージをトリミングする

   このエントリーをはてなブックマークに追加 Clip to Evernote
前回示したOpacityMaskのもう一つのサンプルです。
イメージを円形にくりぬく際に、ぼかし効果を付加しています。
どのようなBrushを使用しているかがわかるように、ウィンドウの下には そのマスクするBrushを表示しています。

OpcaityMaskTrim



  

Posted by gushwell at 22:30Comments(0)TrackBack(0)

2013年04月23日

WPFサンプル:OpacityMaskで不透明マスク処理をする

   このエントリーをはてなブックマークに追加 Clip to Evernote
この例では、LinearGradientBrushを使って、マスク処理をしています。
そのスクリーンショットをご覧ください。

OpcaityMask1
OpcaityMask2
OpcaityMask3

不透明マスクの働きが理解できるように、不透明マスクそのものもウィンドウ下に表示しています。
黒い四角が不透明マスクです。黒いところ(黒である必要はないですが)が表示され、白いところ(実際はTransparent)が不透明になります。
画像処理に疎い僕は、感覚的には黒いところが不透明になったほうが直感的かなと思うのですが、 名前がOpacity(不透明)なので反対になるのでしょうね。
Sliderの値で、LinearGradientBrushを変化させています。

以下、XAMLです。


  
Posted by gushwell at 22:00Comments(0)TrackBack(0)

2013年04月21日

WPFサンプル:Opacityプロパティで背景が透けてみえるようにする

   このエントリーをはてなブックマークに追加 Clip to Evernote
Opacityプロパティのサンプルです。
Opacityは、不透明度(日本語として違和感があるけど)を表します。
既に、ImageBrushやDropShadowEffectのサンプルでもOpacityプロパティを使っていますが、 今回は、UIElementのOpacityプロパティのサンプルとなります。

Opacity1
Opacity2
Opacity3

ここでは、TextBlock, Button, RectangleのOpacityの値を変化させています。
Opacityの既定値は、1.0で、完全に不透明となっています。
0に近づくにつれ、透明になっていきます。

以下、XAMLです。


  
Posted by gushwell at 22:30Comments(0)TrackBack(0)

2013年04月18日

WPFサンプル:Clipプロパティでイメージの一部をトリミングする

   このエントリーをはてなブックマークに追加 Clip to Evernote
ImageオブジェクトのClipプロパティを使用すると、イメージの一部をトリミングして切り出すことができます。
Clip プロパティに Geometryオブジェクトを設定することで、さまざまなジオメ トリック形状 (楕円パス、線分、複雑なパスなど) を使ってイメージをトリミン グすることができます。
ここでは、楕円(EllipseGeometry)と星型(PathGeometry)でイメージをトリミングしてみました。

ClippingSample

  
Posted by gushwell at 23:00Comments(0)TrackBack(0)

2013年04月16日

WPFサンプル:DropShadowEffectを使い影付き効果とにじみ効果を出す

   このエントリーをはてなブックマークに追加 Clip to Evernote
DropShadowEffectを使うと、コントロールに影をつけたり、にじみ効果を出すことができます。
DropShadowEffectクラスの主要プロパティは以下の通り。
  1. ShadowDepth : オブジェクトと、オブジェクトの影との間の距離を設定します。
  2. Direction : 影が付く角度を設定します
  3. Color : 影の色を設定します。
  4. Opacity : 影の不透明度を設定します。 有効な範囲は、0.0 〜 1.0 です。0.0 は影が完全に透明であることを示し、1.0 は影が完全に不透明であることを示します。例えば、値 0.5 は影の不透明度が 50% であることを示します。

サンプルプログラムでは、この3つのプロパティをSliderの値にバインドさせています。
なお、DropShadowEffectのShadowDepthプロパティに0 を設定することで、にじみ効果を出すことができます。
サンプルプログラムのスクリーンショットです。

DropShadow1

DropShadow2

XAMLを示します。
  
Posted by gushwell at 23:00Comments(0)TrackBack(0)

2013年04月14日

WPFサンプル:BlurEffectを使いぼかし効果を得る

   このエントリーをはてなブックマークに追加 Clip to Evernote
BlurEffectを使うと、ぼかし効果を得ることができます。

BlurEffect1   BlurEffect2

この例では、TextBlock, Image, Buttonにぼかし効果を付加しています。
UIElementには、Effectプロパティが用意されており、このEffectプロパティに各種ビットマーク効果を表すオブジェクトを設定することで、ぼかしなどの効果を得ることができます。
要素間のバインド機能を使い、Sliderを操作すると、そのValueの値に応じ、BlurEffectのRadiusプロパティが変化させています。
Radiusプロパティには、BlurEffect によって適用されるぼかしの大きさを設定します。
値が 0 の場合、ぼかし効果はありません。値が大きいほど、ぼかし効果が高くなります。
既定値は 5 です。


  
Posted by gushwell at 23:00Comments(0)TrackBack(0)

2013年04月11日

WPFサンプル:Pathオブジェクトを使い、枠付きテキストを表示する

   このエントリーをはてなブックマークに追加 Clip to Evernote
前回は、DrawingBrushを使った枠付きテキストのサンプルコードを載せましたが、今度は、Pathオブジェクトを使った枠付きテキストを表示するサンプルをお見せします。

PathStroke1

PathStroke2

まずは、いつものようにXAMLです。これは特に説明するような特殊なところはありません。


C#のコードを以下に示します。


以下簡単な手順です。

まずはTypefaceオブジェクトを生成します。
次にFormattedText を作成します。この時、ComboBoxで選択したフォントサイズを指定するようにしています。
このFormattedTextオブジェクトのBuildGeometryメソッドを使い、Geometryオブジェクトを得ています。LinearGradientBrushオブジェクトは、枠部分のブラシ用で、グラデーション効果がでるようにしています。
ここまでは基本的に、前回と同じですね。
最後に、Pathオブジェクト必要なプロパティに値をセット(DataにGeometryオブジェクト、StrokeにLinearGradientBrushオブジェクトなど)することで、枠付き文字を表示しています。
  
Posted by gushwell at 23:00Comments(0)TrackBack(0)

2013年04月09日

WPFサンプル:DrawingBrushで枠付きテキストを表示する

   このエントリーをはてなブックマークに追加 Clip to Evernote
DrawingBrushで枠付きテキストを表示するサンプルです。

まずは、サンプルプログラムのスクリーンショットを示します。

DrawingBrush1

DrawingBrush2

TextBoxに文字列を入力し、ボタンを押すと、枠付き文字列が表示されます。
ここでは、枠にグラデーション効果を付けています。
ウィンドウサイズを変更するとそれに追随して枠付きテキストのサイズも変化します。

まずは、XAML。


いたってシンプルなXAMLです。
枠付きテキストを表示する処理はすべてC#のコードとして書いています。

以下C#のコードです。


このような枠付きテキストを表示するには、DrawingObjectを使います。

簡単に何をやっているか説明します。
button1_Clikcでは、textBox1のフォント情報を使いTypefaceオブジェクトを生成しています。
このTypefaceオブジェクトと入力文字列をGetFrameDrawingメソッドに渡し、Drawingオブジェクトを得ています。
このDrawingオブジェクトからDrawingBrushを生成し、Canvasの背景にセットすることで、枠付き文字を描画しています。

GetFrameDrawing(引数には、描画したい文字列とそのFontFaceが渡ってきます) メソッドでは、引数で渡されたTypefaceオブジェクトから、Geometry(幾何学的図形を定義するクラス)を作成します。これがテキストを図形として定義したものです。
このGeometryに対し、グラデーション用のBrushを使って、枠付きのテキストを表すGeometryDrawing オブジェクトを生成しています。
塗りつぶしは行わないことで枠付き文字列にしているので、GeometryDrawingのコンストラクタの第1引数には、nullを指定しています。


なお、この方法では、Canvasのサイズに合わせて枠付き文字が描画されます。
つまり、フォントサイズを 64 と指定していますが、64のサイズでは描画されません。DrawingBrushを使って、指定したフォントサイズで描画する方法が分かりませんでした。
このやり方ではなく、Pathオブジェクトを利用すれば、指定したフォントサイズで枠付きテキストを描画できるようです。
次回は、そのサンプルを掲載したいと思います。

  
Posted by gushwell at 23:00Comments(0)TrackBack(0)