[WPF] Windowsでマルチタッチ

Windowsでマルチタッチ試してみた。

マルチタッチに対応しているのはOSはWindows7からで対応するアプリを開発するには.NetのWPF4以降か、Win32 APIを使う。Windos8以降だとWindowsストア向けに作れば対応できる。（Windowsストア向けは、まだ調べてない)

WPFアプリのプロジェクトを新規作成してCanvasを貼り付けて、TouchDown、TouchMove、TouchUpイベントを取ればマルチタッチが取れるようになる。これらのイベントはマウスのMouseDown、MouseMove、MouseUpイベントのタッチ版のようなものだ。

複数のタッチ(指)を認識するには、タッチイベントで渡されるTouchEventArgsのTouchDeviceのIdで複数の指を識別する。複数のタッチそれぞれにIDがふられてそれぞれイベントが発生することになる。

サンプルは、タッチしたところに赤丸(かなり大きいが(^^;))とIDが表示されるようになっている。ついでにマウスイベント、スタイラス(デジタイザペン)でも円を描画するようにしてる。マウスは青丸で押してるボタンを表示する。スタイラスは緑丸とIDを表示し、円は筆圧によって大きさが変わるようになっている。
これでわかるのが、タッチするとスタイラス、マウスのイベントが、スタイラスで画面を触るとマウスのイベントが発生する。この辺はそれぞれのEventArgsのhandledプロパティにtrueを設定すると発生しなくなるが、タッチ、スタイラスとも長押しすると右ボタンを押したマウスイベントは発生するようなので都合が悪い場合はなんか別の方法で回避しないといけない。(簡単な方法があるかは調べてないので不明)

サンプル：TestMultiTouchWPF.zip

全体を見ないとわからない部分もあるんだが、サンプルからタッチ関係のイベント部分を抜き取ったものものせとく。

        /// <summary>
        /// タッチダウンイベント
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void canvas_TouchDown(object sender, TouchEventArgs e)
        {
            // 座標取得
            TouchPoint p = e.GetTouchPoint(canvas);
            // 図形生成
            Mark mark = Mark.makeMark(e.TouchDevice.Id.ToString(), TOUCH_MARK_SIZE, Colors.Red);
            // 図形をキャンバスへ追加
            canvas.Children.Add(mark.ellipse);
            canvas.Children.Add(mark.label);
            canvas.UpdateLayout();
            // 座標を指定
            mark.SetPos(p.Position);
 
            // タッチをキャプチャ
            canvas.CaptureTouch(e.TouchDevice);
            // IDごとに図形を保存
            touchPoints[e.TouchDevice.Id] = mark;
        }
 
        /// <summary>
        /// タッチムーブイベント
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void canvas_TouchMove(object sender, TouchEventArgs e)
        {
            if (e.TouchDevice.Captured == canvas)
            {
                // IDごとの図形を取得
                Mark mark = touchPoints[e.TouchDevice.Id];
                // 座標を指定
                TouchPoint p = e.GetTouchPoint(canvas);
                mark.SetPos(p.Position);
            }
        }
 
        /// <summary>
        /// タッチアップイベント
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void canvas_TouchUp(object sender, TouchEventArgs e)
        {
            // タッチキャプチャをリリース
            canvas.ReleaseTouchCapture(e.TouchDevice);
            // 図形を削除
            canvas.Children.Remove(touchPoints[e.TouchDevice.Id].label);
            canvas.Children.Remove(touchPoints[e.TouchDevice.Id].ellipse);
            touchPoints.Remove(e.TouchDevice.Id);
        }