#wp7dev_jp さて、いったん今後の作業のためにアプリを整理します。 まずは 画像ファイルを追加します。 ファイルの追加 プロジェクトに、「Images：フォルダを追加して、そこに以下のファイルをコピーします。 フォルダ： C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Icons\dark ファイル１：appbar.folder.rest.png ファイル２：appbar.favs.rest.png コピーしたらファイルのプロパティを以下のように設定...

#wp7dev_jp #wpdev_jp デフォルトでONになっているシステムトレイ。 アプリケーションの画面デザインを考えると表示させたくない、というときもあるでしょう。 でも、時計だけは表示させたい、なんて時もあるはず。では、自前で時計を作ってみましょう。   自前で時計表示 今回は、C#のコードだけ。これを全部コピペすれば OKです。(画面にLayoutRootがある前提です） protected override void OnNavigatedTo( System.Windows...

#wp7dev_jp さて、 写真にぼかしを かけてみましたが、広範囲のぼかしをかけると、計算量が増え処理速度の問題が出ます。Blur=2くらいでは1，2秒ですが、 Blur = 6では約5秒、そして10では訳12秒かかります。ではどうしたらいいでしょう？ 正直に言えば、隣り合った点はそれほど大きな色の変化をしていません。ですから平均をとるときに1，2個間引いたとしてもそれほど大きな変化は出ないでしょう。 ではどのくらい間引くとどのくらい画像に影響するのか？ 下記は Blur 10の設定で、間引きなし...

 

#wp7dev_jp そういえば、この辺の話は自分で考えたり、ほかで紹介されている方法をつまみ食いしてます。いいサイトがあればぜひ教えてください。 さて、Photoshop のフィルタなどでもおなじみのガウスぼかし。多分こんな感じです。 1つの点をぼかすと 右のように変化します。そのとき、中心からの濃さはガウス分布によって広がります。これを実際にロジックで実行します。 1つの点をまずは横方向にぼかしたときの結果を考えます。そしてそれをもとに縦方向にぼかした時の影響を考えます。 これまで平均をとっていた時には...

#wp7dev_jp さて、 前���作ったアプリ にマスクの機能をつけます。つまり、画面全部をぼかすのではなく画面の一部をぼかします。 プログラム的にやる方法もありますが、今回は簡単な方法でトライします。 その方法とは、 OpacityMask 。実は Image コントロールには初めからマスクの機能があるんです。 マスク画像の準備 ということでマスク画像を準備します。真中が透明（=画像が透明になる）で周りが黒（画像が不透明になる）のマスク画像を用意します。 これをプロジェクトにコピーします。 実は...

#wp7dev_jp さて、 前々回作ったアプリ にマスクの機能をつけます。つまり、画面全部をぼかすのではなく画面の一部をぼかします。 前回、 OpacityMask を使って、マスク画像でぼかしました。 今回はマスク画像を使わずに行います。   方法 １ 画像も使わずに、C#のコードも使わずにやる方法 要は Opacity Mask を作ればいいだけで、グラデーションブラシで実装すると一番簡単。 なので、実は 前々回作ったアプリ に下のグラデーションブラシの Opacity Maskを追加するだけで同じ効果が作れます...

#wp7jp #is12t 先日公開した、 Windows Phone の壁紙 : 高橋忍オリジナル版 。このための壁紙と、この画像を作るためのツールなどがあるわけではなく、私が自分でPhotoshopを使って作ったものです。 1つは純粋に壁紙を作るためのテンプレートで、待ち受けのための画像があるだけです。 もう一つは、ダウンロード画面を作るためのテンプレート。画像を作るためには3つの画像が必要です。 背景画像 作成した壁紙画像 QRコード画像 ...

#wp7dev_jp さて、これまで写真をぼかすことをやってきましたが、今回から別のネタで進めてみます。 今回からトライするのは、レイヤー機能です。Photoshop に搭載しているフォトレタッチの重要な機能で、１つの画像に2つ目の画面をいろいろな効果を付けて合成します。 今回は、まず乗算を実装してみます。 ファイルの追加 プロジェクトに、「Images：フォルダを追加して、そこに以下のファイルをコピーします。 フォルダ： C:\Program Files (x86)\Microsoft SDKs...

#wp7dev_jp さて、前回の 写真をぼかす 改め加工する Part 5 レイヤー合成 で、2つの画像を乗算で合成するアプリを作りました。 あとは、レイヤースタイルを変えるだけでいろいろな処理を実装できます。 オーバーレイ Photoshop のフォトレタッチでよく使われるものの中に オーバーレイという機能があります。 オーバーレイの処理は、各点の明るさの暗い場合は、乗算と同じ処理をし、明るい場合はスクリーン（反転画像の乗算）処理をします。 結果として、明るい部分は明るく暗い部分は暗くなりながら...

#wp7dev_jp 前回は、 レイヤー合成 をベースに オーバーレイ を実装してみました。 さて、今後のことを考えてプログラム設計をちょっと変えてみます。エフェクトの部分だけを別クラス化してみます。 エフェクト系のクラスファイルをまとめるために Effect フォルダを作成します。フォルダを指定したら、「プロジェクト」メニューの「クラスの追加」を選択します。Overray.csを作成します。 Effects/Overray.cs 基本的には、前回の内容をコピペするだけですが、WriteableBitmap...

#wp7dev_jp 写真を加工する Part5.1.1 オーバーレイクラス化 でフィルタを別クラスファイルにまとめました。 そんなわけで以前作った、 ガウスぼかしフィルタ を新たに追加します。 Effects/Blur.cs 基本的な作りは、 オーバーレイクラス化 と同じです。 ぼかしではフィルタ画像を使わないので、画像の引数は1つだけです。 その他ぼかし半径を引数は引数で指定し、 更に間引き引数付き・無しの関数を準備（引数なしの場合は間引きなし） そのほかは以前の ガウスぼかしフィルタ と基本的には変わってないです...

#wp7dev_jp さて、それ以外にもさまざまフィルタを試してみましょう。 加算 単純に元画像にフィルタ画像を足します。全体的に明るく白っぽくなります。ちなみに Photoshop では覆い焼き（リニア）という名称です。 // 加算 R = R1 + R2; G = G1 + G2; B = B1 + B2; if (R > 255) R = 255; if (G > 255) G = 255; if (B > 255) B = 255; 減算...

#wp7dev_jp Picture ハブから写真を選択する PhotoChooserTask。これ結構便利です。 まずはサンプルコード。新しいプロジェクトでこのコードを足すだけです。 // コンストラクター public MainPage() { InitializeComponent(); this .Loaded += new RoutedEventHandler(MainPage_Loaded); } void MainPage_Loaded( object sender,...

#wp7dev_jp 中華フォント対策は1行で済みますが、簡単なだけに忘れてしまいます。そこでコードスニペットにして、登録しておきましょう。 マイドキュメント\Visual Studio 2000\Code Snippets\Visual C#\My Code Snippets\jpfont.snippet <? xml version="1.0" encoding="utf-8" ?> < CodeSnippets xmlns = "http:/...

#wp7dev_jp 調べて、実装して、まとまったら記事を書く。 そんな繰り返しの中、実装がちょっと先行してしまうこともあり、こんな状態。 うーん、さてどうしよう？ まだ調べなきゃいけないもの、作らなきゃいけないものはたくさんあるんだけどね。 ひとまず...寝よう。

#wp7dev_jp フィルタの追加。 覆い焼き 簡単に言うとハイライトを当てる処理になります。 //覆い焼き if (R2 == 255) R = 255; else R = (255 * R1) / (255 - R2); if (G2 == 255) G = 255; else G = (255 * G1) / (255 - G2); if (B2 == 255) B = 255; else B = (255 * B1) / (255 - B2); if (R > 255...

#wp7dev_jp ちょっといい情報を教えてもらって、100年前の写真にする加工をやってみた。基本概念をもとに、試行錯誤して、ひとまず簡略化。 元画像を白黒に 白黒になった元画像のダイナミックレンジを下げる（コントラストを強くする） 古い紙の画像を、不透明度75%で重ねる。 という感じで、結構簡単にできた。 プログラムの中心はこんな感じ。いったんグレースケールにして、（RGB→Gr）高コントラスト化（Gr-85)*3 で完成。 for ( int pixel = 0; pixel < input1...

#wp7dev_jp さて、いろいろなエフェクトをつけてきましたが、この辺を選択できるメニューが必要です。 そこで横スクロールのボタンメニューを作るわけですが、いくつか方法はあります。 リストコントロールを使ってテンプレートを作り横方向リストコントロールにする ピボットを使う スクロールビューワーでボタンを並べる そもそも使いたいのはメニューだけで画面は必要ないので、ピボットを使うシナリオはなし。リストコントロールも複数選択などはないので、ちょっとオーバースペックかな？ということで単純にスクロールビューワーを使うことにする...

#wp7dev_jp Windows Phone 用 の デザイン用 Grid が公開されています。 The Windows Phone design Grid - Love it! でもね、開発ツールにはスナップ機能がないから、見た目でドットを調整しなければならないので面倒！ ... そういえば、Visual Studio にはほかのアイテムの位置に合わせてスナップする機能があるじゃん！ということでこれを逆手にとってデザイン用のガイドを並べてみました。 これなかなか便利です。こんな感じでスナップしてくれます...

#wp7dev_jp Visual Studio で、Metro Grid デザインを簡単に！ の記事で、オブジェクトを配置して、Visual Studio でデザインしやすい方法をご紹介しました。 さて、Expression Blend には、スナップ機能がありますので、こちらを使いたいところですが、Metro のサイズはちょっと変則で既定のスナップでは対応しきれないところもあります。なので、あくまでも「ちょっと楽にする」というコンセプトで。 設定は簡単です。「ツール」メニューの「オプション」で設定をします...

#wp7dev_jp これまで、様々な画像フィルタを作ってきて、それを組み合わせてフィルタ効果を実装した。 例えば上記の効果を作るために、フィルタ処理を重ねて実装している。ここでは、レベル補正と→単色乗算→トーンカーブをかけている。 int [] tmp; uint color = 0xfff6ddad; float [] tc = ToneCurve.getcurve(0, 39, 75, 70, 167, 203, 255, 255); tmp = Level.effect(src, w...

#wp7dev_jp 出来ればヘルプやチュートリアルのページがあったほうがアプリとしてはうれしいですが、作るのが大変。 簡単な方法は、 手順通りに画面キャプチャしてみせる こと。 その時に便利なのが、Pivotです。ウイザード的な処理は大体やってくれます。が、そのPivotを使ったページを作るのが面倒。そこで作ってみました。 Pivot を使ったチュートリアルを作ってみる 出来ればこの辺は頭を使いたくないので、コピペでできるものを考えています。事前に元画像ファイルは取得しておきましょう。  ...

#wp7dev_jp 独特のUIデザインを持つ Feedworm ですが、こんなボタンデザインになるテンプレートを作ってみましょう。 こちらがオリジナルのデザイン。 そして今回作ったのがこちら。アイコンは、いつものSDKのIconふぉるたにあるもの（ApplicationBarIconButtonで使っている物を使用） テンプレートはこんな構成になっています。 アイコン部分はひとまず、Rectangle にして、このBackgroundをTemplateBindingでBackgroundとひもづけています...

#wp7dev_jp #wpdev_jp ピンチ操作で画像の拡大縮小、よくありそうなシナリオですが実装もそれほど難しくはありません。 まずは、UI側の準備です。Imageコントロールだけですが。 ピンチで画像の拡大縮小 最小サイズは画面幅＝480 最大サイズは2000 ひとまず真ん中に表示 MainPage.xaml 拡大縮小処理の、最大・最少サイズの管理は本来面倒なのですが、プロパティに用意されているのでその辺は実装する必要はありません。これはうれしい。 <!--LayoutRoot は...