[Silverlight] Tips : マルチタッチ対応の定石

Silverlight でマルチタッチな操作を実現するには Touch.FrameReported イベントを処理する必要があります。

※逆に言うと、シングルタッチの対応だけでよく、かつマウスとタッチとを区別する必要がなければ、ランタイムがタッチイベントをマウスイベントに自動的に昇格してくれるので、マウスイベントを処理するだけでいいということ。

処理の内容はもちろんアプリケーションごとに異なるわけですが、構造はかなり定型的です。
以下のコードがそれ。

01: public MainPage()
02: {
03:     InitializeComponent();
04:
05:     // マルチタッチのイベントハンドラ
06:     Touch.FrameReported += new TouchFrameEventHandler(Touch_FrameReported);
07: }
08:
09: // 前回のタッチイベントの時の座標
10: private Dictionary prevPoints = new Dictionary();
11:
12: void Touch_FrameReported(object sender, TouchFrameEventArgs e)
13: {
14:     // プライマリポイント(=1点目のタッチ)でマウスイベントへの自動昇格を止める
15:     TouchPoint primaryPoint = e.GetPrimaryTouchPoint(LayoutRoot);
16:     if (primaryPoint != null &&
17:             primaryPoint.Action == TouchAction.Down)
18:         e.SuspendMousePromotionUntilTouchUp();
19:
20:     // 今回のイベントでのすべてのタッチポイントの情報
21:     TouchPointCollection touchPoints = e.GetTouchPoints(LayoutRoot);
22:
23:     // 1点ごとに処理
24:     foreach (var touchPoint in touchPoints)
25:     {
26:         TouchDevice dev = touchPoint.TouchDevice;
27:         TouchAction action = touchPoint.Action;
28:
29:         if (action == TouchAction.Down)
30:         {
31:             // タッチ開始
32:
33:             prevPoints.Add(dev.Id, touchPoint.Position);
34:         }
35:         else if (action == TouchAction.Move)
36:         {
37:             // タッチポイントの移動
38:         }
39:         else if (action == TouchAction.Up)
40:         {
41:             // タッチ終了(指が離れた)
42:
43:             prevPoints.Remove(dev.Id);
44:         }
45:     }
46: }

 

  • 6行目 ・・・ Silverlight でタッチイベントを処理するには必ずこの行が必要。Silvelight では、タッチイベントはアプリケーションの中の1カ所で処理しなければならないので(マウスイベントはコントロールごとにイベントハンドラが存在しますよね)、MainPage のコンストラクタで FrameReported イベントにハンドラを結びつけます。

  • 10行目 ・・・ 単に「タッチされた」だけでいいのであれば不要ですが、前回のタッチポイント(座標)との差が必要になることがあるでしょう。回転や拡大、移動などでは必須ですよね。このために前回のタッチポイントを保持する変数を用意します。ここで Dictionary のキーを int にしているのは、タッチが始まってから指を離すまでの間、各ポイントは同一の ID を持っているから。この ID を見ることでどの指がどこに移動したかを追いかけることができます。

  • 12行目~ ・・・ タッチイベントハンドラの本体

  • 15~18行目 ・・・ 何もタッチされていない状態から最初のタッチが始まると、ランタイムはその点をプライマリポイントとして返してくれます。マウスイベントの自動昇格されるのはこの点の情報。 自動昇格が都合が悪い時には SuspendMousePromotionUntilTouchUp で昇格を止めます。昇格が止まるのは文字通りタッチアップまでの期間だけなので、大抵の場合はプライマリポイントに対して毎回昇格を止めることになるはず。

  • 21行目 ・・・ GetTouchPoints で今回のイベントでのすべての点(1点でも2点でもそれ以上でもまとめて)を返してくれます。

  • 24行目~ ・・・ GetTouchPoints で得られた各点について順番に必要な処理をしていきます。

  • 26, 27行目 ・・・ 後のコードを見やすくするために。ちなみに上で触れたタッチポイントの ID は TouchDevice.Id プロパティで得られます。

  • 29行目~, 35行目~, 39行目~ ・・・ 今回のイベントで、タッチポイントがタッチされ始めたか、指が移動したか、タッチが終わったかを判断しています。あとはそれぞれのブロックの中に必要な処理を入れていけばマルチタッチ対応なアプリケーションになります。33行目、43行目のように、タッチポイントのトラッキングを始めたり止めたりするのもお忘れなく。

Silverlight でタッチ対応しようとすると、まず例外なくこの構造になるはず。 こうして見ると、マルチタッチ対応は(コード上では)それほど難しくないことがわかると思います。

広告
カテゴリー: Silverlight タグ: , パーマリンク

[Silverlight] Tips : マルチタッチ対応の定石 への1件のフィードバック

  1. ピンバック: タッチ対応アプリケーションショーケース « 技術との戯れ

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中