Space between touch points on IE10

Question

I'm working on the plugin flot.touch.js which add touch interactivity (pan and zoom) on the chart for webkit browsers. I want to make it work on IE10 too but I don't know how to retrieve the space between my touch points (I need this for calculate the scale).

On webkit browsers, we can do this by using these variables :

evt.originalEvent.touches[0].pageX
evt.originalEvent.touches[0].pagey
evt.originalEvent.touches[1].pageX
evt.originalEvent.touches[1].pageY

Answer 1

With IE's pointer events, a separate event is fired for each touch point. Unlike iOS touch events (as implemented by other browsers too), the state of each "pointer" is tracked separately. Consider it a more generic event that groups several pointer-based input devices.

Each event object is given a pointerId property that can be used to track its state. To track multiple touches, you'll need to store that pointerId along with any other variables in an object outside the scope of the event handler's function, along with any other data you might need. For example:

var pointers = {};
function pointerDown(evt) {
    if (evt.preventManipulation)
        evt.preventManipulation();

    pointers[evt.pointerId] = [evt.PageX, evt.PageY];

    for (var k in pointers) {
        // loop over your other active pointers
    }
}
function pointerUp(evt) {
    delete pointers[evt.pointerId];
}

Further reading:

• IEBlog - Handling Multi-touch and Mouse Input in All Browsers

Answer 2

Like Andy E said. Track how many pointers you have on your screen and store properties from each of them (in your case x and y coordinates, acquired form event)

A nice example of multitouch can be found here: http://ie.microsoft.com/testdrive/Graphics/TouchEffects/ and you can go into the code with F12 tools and get all the code under the Script tag: http://ie.microsoft.com/testdrive/Graphics/TouchEffects/Demo.js

There you can find this part of code:

function addTouchPoint(e) {
    if(touchCount == 0) {
        document.addEventListener(moveevent, moveTouchPoint, false);
    }

    var pID = e.pointerId || 0;
    if(!touchPoints[pID]) {
        touchCount++;
        touchPoints[pID] = {x : e.clientX, y : e.clientY};
    }
}

Hope it helps

Answer 3

If you're on a Windows 8 platform, IE10 supports the MSGesture object. This object can be used like the iOS version of gesture events. To initialize the object, we have to set the target object as well as add the MSPointer on MSPointerDown. For example:

var myGesture = new MSGesture();
var myElement = document.getElementById("MyCanvas");
myGesture.target = myElement;  //sets target
myElement.addEventListener("MSPointerDown", function (event){
   redGesture.addPointer(evt.pointerId);  // adds pointer to the MSGesture object
}, false);  

From here, you can add an event listener for the MSGestureChange function to process the event.scale property. Note that if the target is not set, an InvalidStateError exception will occur.