如何检测Windows 8 metro应用程序中的多点触控动作?

本文关键字：多点 应用程序 metro 何检测 检测 Windows | 更新日期: 2023-09-27 18:19:13

我现在正在地铁应用程序上工作，我希望启用多点触控。我已经浏览了谷歌，但我似乎找不到任何API来支持它。有人能告诉我在Windows 8 Metro应用程序中支持多点触控的正确方向吗?

如何检测Windows 8 metro应用程序中的多点触控动作?

你到底想干什么?在每个UI元素

上都有Touch, Pointer(关于Touch/mouse/stylus的抽象)和Manipulation事件。

在JavaScript中你可以使用事件。pointerId表示检测到的多个触摸输入。此标识符为每个新输入提供一个id。当你想用手指获得多次触摸时，你可以使用MSPointerMove事件和这个id。我使用jQuery，但绑定和解绑定函数将不起作用，因为事件没有附加。你必须使用纯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个手指。

看看这篇关于IE10和Metro风格应用的触摸输入

来自post的示例脚本:

<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>

尝试任意控件的操作增量

你可以通过确定任何操作事件参数的Scale属性来确定触摸是否为多点触摸....

 private void AssetMap_ManipulationDelta_1(object sender, ManipulationDeltaRoutedEventArgs e)
        {
            if (e.Cumulative.Scale != 1)
            {
//indicates that it is multitouch
}
相关文章：