[WinRT] Windowsでマルチタッチ

前にWPFでマルチタッチを試してみたのと同様のWindowsストアアプリを試しに作ってみた。

Windowsストアアプリを新規作成して、canvasを張り付けてPointerPressed、PointerMoved、PointerReleasedイベントを取るようにする。
これらのイベントでマウス、ペン、タッチのイベントが発生する。
イベントで渡されるPointerRoutedEventArgsのGetCurrentPointで
PointerPointを取得してそのPointerDeviceのPointerDeviceTypeプロパティでマウス、ペン、タッチの区別ができる。
複数タッチを区別するのはPointerPointのPointerIdプロパティで行う。

サンプル:TestMultiTouchWS.zip

        /// <summary>
        /// ポインタープレスイベント
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        public void canvas_PointerPressed(object sender, PointerRoutedEventArgs e)
        {
            PointerPoint point = e.GetCurrentPoint(canvas);
            // 座標取得
            Point p = point.Position;

            // 図形を生成
            Mark mark = null;
            switch (point.PointerDevice.PointerDeviceType)
            {
                case PointerDeviceType.Mouse:
                    mark = Mark.makeMark(getButtonText(point.Properties), Mark.MOUSE_MARK_SIZE, Colors.Blue);
                    break;
                case PointerDeviceType.Pen:
                    // 筆圧から円のサイズを算出
                    int size = (int)((Mark.STYLUS_MARK_SIZE_MAX - Mark.STYLUS_MARK_SIZE) * point.Properties.Pressure + Mark.STYLUS_MARK_SIZE);
                    mark = Mark.makeMark(point.PointerId.ToString(), size, Colors.Green);
                    break;
                case PointerDeviceType.Touch:
                    mark = Mark.makeMark(point.PointerId.ToString(), Mark.TOUCH_MARK_SIZE, Colors.Red);
                    break;
            }
            if (mark != null)
            {
                // 図形をキャンバスへ追加
                canvas.Children.Add(mark.label);
                canvas.Children.Add(mark.ellipse);
                canvas.UpdateLayout();

                // 座標を指定
                mark.SetPos(p);

                // ポインターをキャプチャ
                canvas.CapturePointer(e.Pointer);
                // IDごとに図形を保存
                pointerData[point.PointerId] = mark;
            }
        }

        /// <summary>
        /// ポインタームーブイベント
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        public void canvas_PointerMoved(object sender, PointerRoutedEventArgs e)
        {
            Mark mark;

            PointerPoint point = e.GetCurrentPoint(canvas);
            if (point.IsInContact)
            {
                // IDごとの図形を取得
                mark = pointerData[point.PointerId];
                if (point.PointerDevice.PointerDeviceType == PointerDeviceType.Mouse)
                {
                    // ラベルにマウスのボタンの状態を設定
                    mark.label.Text = getButtonText(point.Properties);
                }
                else if (point.PointerDevice.PointerDeviceType == PointerDeviceType.Pen)
                {
                    // 筆圧から円のサイズを算出
                    int size = (int)((Mark.STYLUS_MARK_SIZE_MAX - Mark.STYLUS_MARK_SIZE) * point.Properties.Pressure + Mark.STYLUS_MARK_SIZE);
                    // 図形のサイズを指定
                    pointerData[point.PointerId].ellipse.Width = size;
                    pointerData[point.PointerId].ellipse.Height = size;
                    canvas.UpdateLayout();
                }
                // 座標を指定
                mark.SetPos(point.Position);
            }
        }

        /// <summary>
        /// ポインターリリースイベント
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        public void canvas_PointerReleased(object sender, PointerRoutedEventArgs e)
        {
            PointerPoint point = e.GetCurrentPoint(canvas);

            // ポインターのキャプチャをリリース
            canvas.ReleasePointerCapture(e.Pointer);
            // 図形を削除
            canvas.Children.Remove(pointerData[point.PointerId].label);
            canvas.Children.Remove(pointerData[point.PointerId].ellipse);
            pointerData.Remove(point.PointerId);
        }