我正在开发一个metro应用程序，想启用多点触控功能。我在谷歌上搜索了一下，但似乎找不到支持它的API。有人能指点一下我，在Windows 8 Metro应用程序中支持多点触控行为的正确方向吗？
4个回答
2
您想做什么？每个 UI 元素都有触摸、指针（一个关于触摸/鼠标/笔的抽象）和操作事件。
- Robert Levy
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>
通过这种方法，您可以同时使用4个手指。
- Jan Hommes
1
看一下这篇文章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>
- Tiago Andrade e Silva
1
1你试过这个吗？getPointerList似乎不是事件负载的一部分... :\ - Boris Smus
0
尝试对任何控件进行ManipulationDelta操作...
通过确定任何操作事件参数的比例属性，您可以找到触摸是否为多点触控...
private void AssetMap_ManipulationDelta_1(object sender, ManipulationDeltaRoutedEventArgs e)
{
if (e.Cumulative.Scale != 1)
{
//indicates that it is multitouch
}
希望能对你有所帮助...
- kakun06
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接