Question

我正在开发一个地铁应用程序，我正在寻求启用多点触控。我浏览了谷歌，但我似乎找不到任何支持它的API。有人能指出我正确的方向来支持Windows 8 Metro应用程序中的多点触控操作吗？

Answer 1

你到底想要做什么？触摸，指针（触摸/鼠标/手写笔周围的抽象）和每个UI元素上的操纵事件

Answer 2

在JavaScript中，您可以使用 event.pointerId 来检测多个触摸输入。此标识符为每个新输入提供一个id。当你想用手指进行移动的多次触摸时，你可以使用MSPointerMove事件和这个id。我使用的是jQuery，但bind和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>

使用此approch，您可以同时使用4个手指。

Answer 3

看一下这篇文章Touch Input for IE10 and Metro style Apps

来自帖子的示例脚本：

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

Answer 4

尝试任何控件的ManipulationDelta ......

你可以通过detrmining任何操作事件args的Scale属性来找到触摸是否是多点触控....

 private void AssetMap_ManipulationDelta_1(object sender, ManipulationDeltaRoutedEventArgs e)
        {

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

//indicates that it is multitouch

}

希望它能帮到你......

如何在Windows 8 metro应用程序中检测多点触控操作？

4 个答案: