Как обнаружить мультитач-действия в приложении Windows 8 Metro? - PullRequest
Новая
       61

Как обнаружить мультитач-действия в приложении Windows 8 Metro?

4 голосов
/ 30 декабря 2011

Я сейчас работаю над метро-приложением и хочу включить мультитач.Я просмотрел Google, но я не могу найти API для его поддержки.Может ли кто-нибудь указать мне правильное направление для поддержки действий с несколькими касаниями в приложении Windows 8 Metro?

Ответы [ 4 ]

2 голосов
/ 24 июня 2012

В JavaScript вы можете использовать event.pointerId для обнаружения нескольких сенсорных вводов. Этот идентификатор дает каждому новому входу идентификатор. Если вы хотите получить несколько касаний для движения пальцем, вы можете использовать событие MSPointerMove и этот идентификатор. Я использую jQuery, но функция bind and unbind не будет работать, потому что событие не прикреплено. Вы должны использовать простой Javascript для работы мультитача: 

var pointerId=0; 
//add a Eventlistner to the Down Event (compareable to mousedown and touchstart)
$('#button1')[0].addEventListener("MSPointerDown",function(event) {
       pointerId=event.pointerId; //save the pointerId to a (in this case) global var
       window.addEventListener("MSPointerMove", moveHandler, false);
       //The handlers should also be removed on MSPointerUp. 
       //You can't use jQuery unbind for this, it dosn't work.
       //use window.removeListener("MSPointerMove",moveHandler);
},false);

//define the moveHandler and check the pointer ID 
var moveHandler = function(event) {
      if(pointerId==event.pointerId) {
            //If the pointerId is the same, the moving comes from one finger
            //For example we can move the button with the finger
            $("#button1").css({'top':event.pageY,'left':event.pageX,'position':'absolute'});
      }
}

Ниже приведен полный пример с foreach для присоединения обработчиков событий к более чем одной кнопке. Если вы запустите это приложение, вы получите 4 квадрата, которые вы можете перемещать несколькими пальцами. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>App1</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>

    <!-- App1 references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
    <script src="js/jquery.js"></script>
    <script>
        function start() {
            //add a Eventlistner to the Down Event (compareable to mousedown and touchstart)
            $(".button").each(function (i, element) {
                var pointerId = 0;
                $(element)[0].addEventListener("MSPointerDown", function (event) {
                    pointerId = event.pointerId; //save the pointerId to a (in this case) global var
                    window.addEventListener("MSPointerMove", moveHandler, false);
                }, false);

                //PointerUp handler
                window.addEventListener("MSPointerUp", upHandler, false);

                //define the moveHandler and check the pointer ID 
                var moveHandler = function (event) {
                    if (pointerId == event.pointerId) {
                        $(element).css({ "top": event.pageY-50, "left":event.pageX-50 });
                    }
                }

                //remove the moveHandler on PointerUp
                var upHandler = function (event) {
                    if (pointerId == event.pointerId) {
                        window.removeListener("MSPointerMove", moveHandler);
                    }
                }
            });
        }
    </script>
</head>
<body>
    <div class="button" style="width:100px;height:100px;background-color:#F80;position:absolute;"></div>
    <div class="button" style="width:100px;height:100px;background-color:#08F;position:absolute;"></div>
    <div class="button" style="width:100px;height:100px;background-color:#fff;position:absolute;"></div>
    <div class="button" style="width:100px;height:100px;background-color:#4cff00;position:absolute;"></div>
</body>
</html>

При таком подходе вы можете использовать 4 пальца одновременно.

2 голосов
/ 30 декабря 2011

Что именно вы пытаетесь сделать?В каждом элементе пользовательского интерфейса есть Touch, Pointer (абстракция вокруг touch / mouse / stylus) и события Manipulation

1 голос
/ 17 января 2012

Взгляните на этот пост Сенсорный ввод для приложений в стиле IE10 и Metro

Пример сценария из сообщения: 

<script>
function handleEvent(event) {
    var currentPointers = event.getPointerList();
    if (currentPointers.length == 1) {
        event.target.style.backgroundColor = "red";
        } else {
        event.target.style.backgroundColor = "green"; //multiple touch points are used
        }
    }
document.getElementById("foo").addEventListener("MSPointerMove", handleEvent, false);
</script>
0 голосов
/ 28 августа 2012

Попробуйте ManipulationDelta любого элемента управления ...

Вы можете определить, является ли касание мультитач или нет, определив свойство Scale любого аргумента события манипуляции .... 

 private void AssetMap_ManipulationDelta_1(object sender, ManipulationDeltaRoutedEventArgs e)
        {

            if (e.Cumulative.Scale != 1)
            {

//indicates that it is multitouch

}

надеюсь, это поможет вам ...

...