PR

画面上の文字を指でなぞってマーカーを引くサンプル

2012年5月29日(火)
PROJECT KySS

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

CaptureMouseメソッドでInkPresenter1にマウスをキャプチャします。

インクストロークを表す新しいインスタンスmyStrokeオブジェクトを作成します。

ストロークの色を指定し、ストロークの幅と高さを20に指定しています。ここの値を変えるとストロークの幅や高さが太くなったり、細くなったりします。

ストロークのスタイラスポイントに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()
 
    myStroke.DrawingAttributes.Color = Color.FromArgb(100, 255, 0, 51)
    myStroke.DrawingAttributes.Width = 20
    myStroke.DrawingAttributes.Height = 20
    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

ApplicationBarIconButtonのフロッピーのアイコン(保存)がタップされた時の処理

変数storageを、ファイルとディレクトリを格納している分離ストレージ領域を表すIsolateStorageFileクラスとして宣言します。Path.CombineでmyPoemというフォルダとメンバ変数noと.xmlを連結して、変数xmlFilePathに格納します。同じくMarkerInfoという文字列と、メンバ変数noと.xmlを連結して、変数markerPathに格納しておきます。

Visual Basic の埋め込み式を用いて、XML宣言とルート要素、その子要素として、を定義し、埋め込み式の構文である を用いてpoemTextBlockの値を指定します。これは ASP.NET で使用される構文と同じです。

分離ストレージ内のファイルを表すIsolatedStorageFileStreamクラス用オブジェクト変数xmlStreamを用意し、IsolatedStorageFile.CreateFileメソッドで、分離ストレージ内にxmlFilePath変数の持っているフォルダ名付きXMLファイルを作成します。

ファイルが存在する場合は、新しいStreamWriterを生成し、IsolatedStorageFile.OpenFileメソッドで、指定したファイルアクセスを使用して指定したモードでファイルを開き、初期化します。Writeメソッドで埋め込み式のXMLをストリームに書き込みます。

分離ストレージ内のファイルを表すIsolatedStorageFileStreamクラス用オブジェクト変数Streamを用意し、IsolatedStorageFile.CreateFileメソッドで、分離ストレージ内にmarkerPath変数の持っているフォルダ名付きXMLファイルを作成します。Stroke オブジェクトのコレクションで初期化された、XmlSerializerクラスの新しいインスタンスを作成します。

XmlSerializer.Serialize (Stream, Object)の書式で、指定した Object をシリアル化し、生成されたXMLドキュメントを、指定した Stream を使用してファイルに書き込みます。

保存した旨のメッセージを表示します。

  Private Sub GoSave(sender As System.Object, e As EventArgs)
    Dim storage As IsolatedStorageFile = IsolatedStorageFile.GetUserStoreForApplication
    Dim xmlFilePath As String = Path.Combine("myPoem", no & ".xml")
    Dim markerPath As String = Path.Combine("myPoem", "MarkerInfo" & no & ".xml")
    Dim xmldoc As XDocument = <?xml version="1.0" encoding="utf-8"?>
                              <詩詞>
                                <内容><%= poemTextBlock.Text %></内容>
                              </詩詞>
    Using xmlStream As IsolatedStorageFileStream = storage.CreateFile(xmlFilePath)
    End Using
 
    If storage.FileExists(xmlFilePath) = True Then
      Using writer As StreamWriter = New StreamWriter(storage.OpenFile(xmlFilePath, FileMode.Open, FileAccess.Write))
        writer.Flush()
        writer.Write(xmldoc.ToString)
 
        'マーカーの保存
        Using Stream As IsolatedStorageFileStream = storage.CreateFile(markerPath)
          Dim xs As XmlSerializer = New XmlSerializer(GetType(StrokeCollection))
          xs.Serialize(Stream, InkPresenter1.Strokes)
        End Using
        MessageBox.Show("保存しました。")
      End Using
    End If
  End Sub

ApplicationBarIconButtonの×のアイコン(クリア)がタップされた時の処理

インクのストロークをクリアします。

  Private Sub GoClear(sender As Object, e As EventArgs)
    InkPresenter1.Strokes.Clear()
  End Sub

[次]ボタンがタップされた時の処理

  Private Sub nextButton_Click(sender As System.Object, e As System.Windows.RoutedEventArgs) Handles nextButton.Click

インクのストロークをクリアします。

[前]ボタンの使用を可能にします。メンバ変数noが4の場合は、[次]ボタンの使用を不可とします。それ以外の場合は、[前]ボタンの使用を可能にし、メンバ変数noの値を1ずつ増加させます。DataShowプロシージャを実行します。

    InkPresenter1.Strokes.Clear()
    prevButton.IsEnabled = True
    If no = 4 Then
      nextButton.IsEnabled = False
      no = 4
    Else
      prevButton.IsEnabled = True
      no = no + 1
    End If
    DataShow()
  End Sub

[前]ボタンがタップされた時の処理

インクのストロークをクリアします。

メンバ変数noの値が1か1より小さい場合は、[前]ボタンの使用を不可とします。それ以外の場合は、[前]ボタンの使用を可とします。メンバ変数noの値を1ずつ減少させます。DataShowプロシージャを実行します。

  Private Sub prevButton_Click(sender As System.Object, e As System.Windows.RoutedEventArgs) Handles prevButton.Click
    InkPresenter1.Strokes.Clear()
    If no <= 1 Then
      prevButton.IsEnabled = False
      no = 1
    Else
      prevButton.IsEnabled = True
      no = no - 1
    End If
    DataShow()
  End Sub
End Class

【参照リンク】

PROJECT KySSでは現在、16個のWindows PhoneアプリをMarketplaceに公開しています。試用版もありますので、興味のある方はお試しください。
→参照:Windows Phone App Information(PROJECT KySS)

Think IT会員限定特典
  • 画面を指でなぞってマーカーを引くサンプル

四国の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会員サービスの概要とメリットをチェック

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