t100のプログラミング脱出作戦

自分のプログラミング脳をプログラムにして、いつかプログラミングから脱出してやるぞっ!とか夢見ながら、日々プログラム作っていく 百野 貴博 の日記です!今は、屋号『百蔵。』として、Silverlight・WPFを追跡中です! (2007/09/30)
スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
【--/--/-- --:--】 | スポンサー広告 | トラックバック(-) | コメント(-) top↑
Expression Blend 2.5 で、ブラシの使い方を調べてみる。
Silverlightや、WPFやるなら、その表現力を使いこなせなければ勿体ないですよね!
ということで、少しずつExpression Blend の使い方を調べていきまっす。

今回はブラシ。塗りつぶしを調べてみました。

ちなみに使用したのは、Expression Blend 2.5 June 2008 Preview でっす。
■Expression Blendの基本

塗りつぶしの設定は、プロパティパネルの「ブラシ」の項目を使用します。
Expression Blendでは、塗りつぶしに3つのパターンが選べます。
・塗りつぶしなし
・単色塗りつぶし
・グラデーション塗りつぶし
です。


property_panel.jpg




Silverlightは他にも、画像を使ったイメージ塗りつぶしと
動画を使ったムービー塗りつぶしが出来るみたいですが、Expresison Blendから
その方法を見つけられませんでした。
Xaml を手で書かないとダメかな?

とりあえず、今回はグラデーション塗りつぶしを調べてみます。



■グラデーションの基本

グラデーションの塗パターンを決める要素は、以下の3つあります。
・塗りの色のパターン
・グラデーションの方向(直線と放射)
・パターンを使って塗る方向
・パターンの範囲と繰り返し方法

ちょっとややこしいのですが、この3つを組み合わせることで
結構いろんな表現ができるようになります。


■塗りの色のパターン

塗りのパターンは、ここを使います。(なんて名前?)
とりあえず、グラデーションスライダーと勝手に命名することにします。

スライダーについているポイントは、ストップポイントと
これまた勝手に命名します。


Gradient_slider.jpg



グラデーションは、このストップポイントの間で発生します。
なので、このストップポイントの間隔を縮めるとこのようになります。

間隔狭める_01



ストップポイントの外側では、グラデーションが発生していません。
そしてストップポイントを、ギリギリまで近づけてみると、、、



間隔狭める_02


グラデーションが無くなって、ツートンカラーが作れました!わお!

ストップポイントを増やすことで、もっとカラフルにすることも可能です。
また、透明色を入れることで、部分的に透明にするという演出も可能になります。
これは、結構応用が出来そうです。むふふ・・・。



■グラデーションの方向(直線と放射)

これは分かりやすいですね。
グラデーションをストライプ状に塗るか、放射状に塗るかの選択です。

さっきのツートンを放射状にしたところ、、、
日の丸みたいになってしまいました。

あら?


放射を選ぶ




■パターンを使って塗る方向

ツールバーで、「ブラシの変更」を選択すると、オブジェクト上に
矢のようなマーク(アロー)と、円が現れます。


ブラシの変更


アローで、グラデーションの方向を調整し
円で、グラデーションの範囲を調整します。

放射状だと、方向が分かりにくいので直線に戻して確認してみましょう。



アロー回転


また、開始点をずらすことで、塗りに変化をくわえることも出来ます。



アロー回転_02



■パターンの範囲と繰り返し方法


塗りパターンは、以下の繰り返し方法が用意されています。
・Pad(繰り返さないべた塗り?)
・Reflect(反射)
・Repeat(繰り返し)

標準はPadになっていますが、ReflectやRepeatで
面白い効果を出すことができます。



オプション



試しに、Repeatにしてみましょう。


Repeat.jpg



次に、Reflectにしてみましょう。
下から、白黒の順だった塗りが、次は黒白になっているのが分かります。


Reflect.jpg



塗りの範囲は、アローの長さで調整できます。
範囲を短くしてRepeatとReflectを比較してみましょう。


範囲を狭めて比較



■応用

スライダー上の塗りパターンを変化させてみると、Reflectでは
さらに色んな変化を表現できます。


まずは、スライドバー上でグラデーションの間隔をエンドポイントを使って調整してみました。
Reflectでは、太い線、細い線を一つの塗りつぶしで表現できています。

応用


放射状に変更してみました。
円も、使い道が多そうです。

応用_02


カラーリングを変更してみたり、グラデーションの開始点を移動してみたりしました。
何か、新しい模様が作れそうですね!


応用_03





ちょっと長くなってしまったので、今回はここまでにしまっす。

次回は、輪郭についても調べてみなくては・・・。
















管理者にだけ表示を許可する


トラックバックURL:
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。