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

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)

  • 画面を指でなぞってマーカーを引くサンプル

四国の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メルマガ会員のサービス内容を見る

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