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

发布于 2024-12-23 12:33:21 字数 102 浏览 0 评论 0 原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

萌酱 2024-12-30 12:33:21

你到底想做什么？每个 UI 元素上都有触摸、指针（触摸/鼠标/手写笔的抽象）和操作事件

回复收藏 0 原文

小兔几 2024-12-30 12:33:21

在 JavaScript 中，您可以使用 event.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 个手指。

In JavaScript you can use the event.pointerId to detected multiple touch inputs. This identifier gives every new input an id. When you want to get multiplie touches for a move with the finger, you can use the MSPointerMove Event and this id. I'am using jQuery, but the bind and unbind function won't work, because the event isn't attached. You have to use plain Javascript to get multitouch working:

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'});
      }
}

Following is a full example with a foreach to attach the event-handlers to more than one button. If you start this application you will get 4 squares that you can move around with multiple fingers.

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

With this approch, you can use 4 Fingers at the same time.

回复收藏 0 原文

满身野味 2024-12-30 12:33:21

看看这篇文章 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>

Take a look at this post Touch Input for IE10 and Metro style Apps

Sample script from 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>

回复收藏 0 原文

动听の歌 2024-12-30 12:33:21

尝试任何控件的 ManipulationDelta...

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

 private void AssetMap_ManipulationDelta_1(object sender, ManipulationDeltaRoutedEventArgs e)
        {

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

//indicates that it is multitouch

}

希望它会对您有所帮助...

Try ManipulationDelta of any control...

you can find whether a touch is multitouch or not by detrmining the Scale property of any manipulation event args....

 private void AssetMap_ManipulationDelta_1(object sender, ManipulationDeltaRoutedEventArgs e)
        {

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

//indicates that it is multitouch

}

hope it will help you...

回复收藏 0 原文

~没有更多了~