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

2011年11月28日(月)
PROJECT KySS

[保存]ボタンがクリックされた時の処理

保存する画像のファイル名を作成します。現在の「年月日時間分秒.jpg」のファイル名とし、imageFileNameに格納しておきます。
書き込みおよび更新が可能な BitmapSourceを提供する、WriteableBitmapクラス型のmyWriteableBitmap変数を宣言します。InkPresenter1で初期化された、新しいWriteableBitmapのインスタンスmyWriteableBitmapオブジェクトを生成します。WriteableBitmapクラスの第2引数には、ビットマップに特定の変換を適用するTransformを指定できますが、ここではNothingを指定します。
変数storageを、ファイルとディレクトリを格納している分離ストレージ領域を表すIsolateStorageFileクラスとして宣言します。FileExistsメソッドでimageFileNameに格納しているファイルが存在しているかどうかをチェックし、存在している場合は、DeleteFileメソッドで同名ファイルを削除します。
分離ストレージ内のファイルを表すIsolatedStorageFileStreamクラス用オブジェクト変数myStream変数を用意し、IsolatedStorageFile.CreateFileメソッドで、分離ストレージ内にimageFileName変数の持っているファイルを作成します。
Extensions.SaveJpegメソッドで、WriteableBitmapオブジェクトを、JPEGストリームにエンコードします。これは、JPEGファイルのターゲットとなる幅と高さを設定するためのパラメータを持っています。書式は下記の通りです。
Extensions.SaveJpeg(WriteableBitmapオブジェクト,イメージデータストリーム,WriteableBitmapオブジェクトのPixelWidth, WriteableBitmapオブジェクトのPixelHeight,0(固定),0~100の間の写真の品質(70以上を指定))
ピクチャへのアクセスを提供する新しいMediaLibrayクラスのインスタンス、myLibrayを作成します。分離ストレージ内のファイルを表すIsolatedStorageFileStreamクラス用オブジェクト変数Stream変数を用意し、IsolatedStorageFile.OpenFileメソッドで、imageFileNameに格納されているJPEGファイルを、指定したファイルアクセスを使用して指定したモードで開きます。MediaLibrary.SavePictureメソッドで、ストリームオブジェクトに含まれる画像を、メディアライブラリーに保存し、その保存した画像をピクチャオブジェクトとして返します。保存した旨のメッセージを表示します。
  Private Sub saveButton_Click(sender As Object, e As System.Windows.RoutedEventArgs) Handles saveButton.Click
    Dim imageFileName As String=DateTime.Now.ToString("yyyyMMddHHmmss") & ".jpg"
 
    Dim myWriteableBitmap As WriteableBitmap
    myWriteableBitmap = New WriteableBitmap(InkPresenter1, Nothing)
 
    Dim storage As IsolatedStorageFile = IsolatedStorageFile.GetUserStoreForApplication
    If storage.FileExists(imageFileName) = True Then
      storage.DeleteFile(imageFileName)
    End If
    Using myStream As IsolatedStorageFileStream = storage.CreateFile(imageFileName)
      System.Windows.Media.Imaging.Extensions.SaveJpeg(myWriteableBitmap, myStream, myWriteableBitmap.PixelWidth, myWriteableBitmap.PixelHeight, 0, 85)
    End Using
 
    Dim myLibray As New MediaLibrary
    Using Stream As IsolatedStorageFileStream = storage.OpenFile(imageFileName, IO.FileMode.Open, IO.FileAccess.Read)
      myLibray.SavePicture(imageFileName, Stream)
      MessageBox.Show("PicturesHubに保存しました。")
    End Using
  End Sub

InkPresenterからマウス(指)が離れた時の処理

インクストロークの関連付けをなくします。
  Private Sub InkPresenter1_MouseLeave(sender As Object, e As System.Windows.Input.MouseEventArgs) Handles InkPresenter1.MouseLeave
    myStroke = Nothing
  End Sub

InkPresenterのマウスの左ボタンが押下された時の処理(InkPresenterが指でホールドされた時の処理)

CaptureMouseメソッドでInkPresenter1にマウスをキャプチャします。
インクストロークを表す新しいインスタンスmyStrokeオブジェクトを作成します。
チェックされたRadioButtonによって、描画されるストロークの色を変えます。
ストロークの幅と高さを7に指定しています。ここの値を変えるとストロークの幅や高さが太くなったり、細くなったりします。
ストロークのスタイラスポイントにAddメソッドで、InkPresenter コントロールに描画されたストロークのスタイラスポイントを追加します。InkPresenter1にスタイラスポイントの追加されたmyStrokeオブジェクトを追加します。
  Private Sub InkPresenter1_MouseLeftButtonDown(sender As Object, e As System.Windows.Input.MouseButtonEventArgs) Handles InkPresenter1.MouseLeftButtonDown
    InkPresenter1.CaptureMouse()
    myStroke = New Stroke()
 
    If RadioButton1.IsChecked = True Then myStroke.DrawingAttributes.Color = Colors.Red
    If RadioButton2.IsChecked = True Then myStroke.DrawingAttributes.Color = Colors.Blue
    If RadioButton3.IsChecked = True Then myStroke.DrawingAttributes.Color = Colors.Green
    If RadioButton4.IsChecked = True Then myStroke.DrawingAttributes.Color = Colors.Yellow
 
    myStroke.DrawingAttributes.Width = 7
    myStroke.DrawingAttributes.Height = 7
    myStroke.StylusPoints.Add(e.StylusDevice.GetStylusPoints(InkPresenter1))
    InkPresenter1.Strokes.Add(myStroke)
  End Sub

InkPresenterからマウスの左ボタンが離された時(指が離された)の処理。

インクストロークの関連付けをなくします。ReleaseMouseCaptureメソッドで、InkPresenterがマウスキャプチャを保持していた場合、キャプチャを解放します。
  Private Sub InkPresenter1_MouseLeftButtonUp(sender As Object, e As System.Windows.Input.MouseButtonEventArgs) Handles InkPresenter1.MouseLeftButtonUp
    myStroke = Nothing
    InkPresenter1.ReleaseMouseCapture()
  End Sub

InkPresenter上でマウスを移動させた(指を移動させた)時の処理

インクストロークがアクティブな時は、ストロークのスタイラスポイントにAddメソッドで、InkPresenter コントロールに描画されたストロークのスタイラスポイントを追加します。指でなぞった上をストロークが描画されていきます。
  Private Sub InkPresenter1_MouseMove(sender As Object, e As System.Windows.Input.MouseEventArgs) Handles InkPresenter1.MouseMove
    If myStroke Is Nothing = False Then
      myStroke.StylusPoints.Add(e.StylusDevice.GetStylusPoints(InkPresenter1))
    End If
  End Sub
End Class
  • 「読み込んだ画像に落書きをし、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 Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

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