All geek questions in one place

How to define multitouch actions in an application for Windows 8?

I am currently working on a metro application and I want to enable multitouch. I was browsing Google, but I can not find an API to support it. Can someone point me in the right direction to support multi-touch actions in a Windows 8 Metro app?

+4
source share
4 answers

What exactly are you trying to do? There are Touch, Pointer (abstraction around touch / mouse / stylus) and Manipulation events for each user interface element

+2
source

In JavaScript, you can use event.pointerId to detect multiple touch inputs. This identifier gives each new entry an identifier. When you want to get multiple touches for finger movement, you can use the MSPointerMove event and this identifier. I am using jQuery, but the bind and unbind function will not work because the event is not connected. You must use simple Javascript for multitouch to work:

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

The following is a complete example in which foreach attaches event handlers to multiple buttons. If you run this application, you will get 4 squares that you can move with a few 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 agreement you can use 4 Fingers at the same time.

+2
source

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

Example script from a 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>
+1
source

Try ManipulationDelta of any control ...

you can find whether the touch is multitouch or not by separating the Scale property from any arguments of the manipulation event ....

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

hope this helps you ...

0
source

Source: https://habr.com/ru/post/1388517/

More articles:


All Articles