PR

読み込んだ画像に落書きをし、PictureHUBに保存する

2011年11月28日(月)
PROJECT KySS

今回はInkPresenterを使って、「らくがき」した画像の保存処理を紹介します。InkPresenterクラスはオブジェクトの表面にインクを描画するクラスです。

まずは、このプログラムで実装する機能の動作を、下記に解説しておきます。

このサンプルは実機(現時点ではauのIS12T)でも動作しますし、エミュレーターでも動作の確認はできます。エミュレーターの場合は、「らくがき」をして保存した画像は[画像読み込み]ボタンで確認できます。エミュレーターで保存させた場合は、エミュレーターを終了すると、保存した落書き画像はなくなります。

基本的にサンプルの動作確認は、実機(IS12T)で行っています。

実機にプログラムをデプロイし、[画像読み込み]ボタンをクリックします。Picturesのアルバムの中の画像が表示されますので、任意の画像を選択します。選択した画像が「らくがき」アプリケーション上に表示されます。任意の色を選択し、画像上に落書きをすることができます。「らくがき」は[らくがきクリア]ボタンで消去することができますが、一度保存した画像の落書きは消去できません。落書きした画像を[保存]ボタンでPicturesHUBに保存することができます。Picturesから保存した画像を見ることができます。この画像を削除する場合は、右隅下にある[・・・]をタップして表示されるメニューから「削除」を選択します(図1)。

図1:画像を読み込み、落書きをし、PictureHUBに保存した。保存した画像はPicturesから閲覧できる(上)。削除する場合は[・・・]をタップして表示されるメニューの「削除」から削除する(下)(クリックで拡大)

サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。

実機(IS12T)で動かした動画はこちらです。

プロジェクトの作成

VS 2010のメニューから[ファイル(F)/新規作成(N)/プロジェクト(P)]を選択します。次に、「Windows Phone アプリケーション」を選択して、「名前(N)」に任意のプロジェクト名を指定します。ここでは「WP71_InkPresenter」という名前を付けています。Windows Phoneのバージョンは7.1を選択します。

ピクチャへのアクセスを提供するMediaLibrayクラスを使用するため、VS2010メニューの「プロジェクト(P)/参照の追加(R)」から、Microsoft.Xna.Frameworkを追加しておいてください。

MainPage.xamlの編集とコントロールの追加

x:NameがPageTitleというTextBlockを削除します。ApplicationTitleというx:NameのTextBlockのTextプロパティに「らくがき」と指定します。

ツールボックスからButtonコントロールを3個、InkPresenterコントロールを1個、InkPresenterコントロールの子要素となるようにImageコントロールを1個、RadioButtonコントロールを4個配置します。

4個のRadioButtonコントロールを全て選択し、プロパティの[共通]パネル内にあるGroupNameプロパティにmyColorと指定します。4つのRadioButtonコントロールのGroupNameが全てmyColorになります。同じ名称を指定していなければ、RadioButtonコントロールに複数チェックが付いてしまいますので、注意してください。Contentプロパティに色名を指定し、Foreground(文字色)にContentプロパティに指定した色名に該当するColorを指定します。[保存]ボタンは最初の状態ではIsEnabledのチェックを外し、選択不可としておきます。全て設定すると図2のような配置になります。

図2:各コントロールを配置した(クリックで拡大)
Think IT会員限定特典
  • 「読み込んだ画像に落書きをし、PictureHUBに保存する」サンプルプログラム

四国のSOHO。薬師寺国安(VBプログラマ)と、薬師寺聖(デザイナ、エンジニア)によるコラボレーション・ユニット。1997年6月、Dynamic HTMLとDirectAnimationの普及を目的として結成。共同開発やユニット名義での執筆活動を行う。XMLおよび.NETに関する著書や連載多数。最新刊は「Silverlight実践プログラミング」両名とも、Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。http://www.PROJECTKySS.NET/

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています