私は今、地下鉄のアプリケーションに取り組んでおり、私はマルチタッチを有効にするために探しています。私はGoogleの周りをブラウズしましたが、私はそれをサポートするためのAPIを見つけることができないようです。誰かがWindows 8 Metroアプリケーションでマルチタッチアクションをサポートする正しい方向に向けることができますか？Windows 8メトロアプリでマルチタッチアクションを検出するにはどうすればよいですか？
あなたは正確に何をしようとしていますか？タッチ、ポインタ（タッチ/マウス/スタイラス周りの抽象化）、およびすべてのUI要素の操作イベント
がポストからのサンプルスクリプトこの記事で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>
JavaScriptではevent.pointerIdを使用して複数のタッチ入力を検出できます。この識別子はすべての新しい入力にIDを与えます。指で動きを乗算する場合は、MSPointerMoveイベントとこのIDを使用できます。私はjQueryを使用していますが、イベントが添付されていないため、バインドおよびバインド解除機能は機能しません。
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との完全な例です：あなたはマルチタッチ作業を取得するために、プレーンJavascriptを使用する必要があります。このアプリケーションを起動すると、複数の指で移動できる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つの指を使用できます。
private void AssetMap_ManipulationDelta_1(object sender, ManipulationDeltaRoutedEventArgs e)
{
if (e.Cumulative.Scale != 1)
{
//indicates that it is multitouch
}
が、それは願っています....あなたはタッチが任意の操作イベント引数のスケールプロパティをdetrminingすることにより、マルチタッチであるかどうかを見つけることができる任意のコントロールのManipulationDelta ...
をお試しください助けてください...
これは試しましたか？ getPointerListはイベントペイロードの一部ではないようです...：\ –
RTMでサポートされなくなりました – Aerilys