Abstand zwischen Berührungspunkten auf IE10

Question

Ich arbeite an dem Plugin flot.touch.js, das Touch-Interaktivität (Pan und Zoom) auf dem Diagramm für Webkit-Browser hinzufügen. Ich möchte es auf IE10 zu arbeiten, aber Ich weiß nicht, wie Sie den Raum zwischen meinen Berührungspunkten abrufen (ich brauche das für die Berechnung der Skala).

Auf WebKit-Browsern, wir dies diese Variablen unter Verwendung tun können:

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

Answer 1

Mit Zeiger Ereignisse des IE ist eine separate Veranstaltung für jeden Berührungspunkt abgefeuert. Im Gegensatz zu iOS-Touch-Ereignissen (wie sie auch von anderen Browsern implementiert werden) wird der Status jedes "Zeigers" getrennt verfolgt. Betrachten Sie es als ein allgemeineres Ereignis, das mehrere zeigerbasierte Eingabegeräte gruppiert.

Jedes Ereignisobjekt erhält eine pointerId-Eigenschaft, die zum Verfolgen seines Status verwendet werden kann. Um mehrere Berührungen zu verfolgen, müssen Sie diese pointerId zusammen mit anderen Variablen in einem Objekt außerhalb des Bereichs der Ereignisbehandlungsfunktion zusammen mit allen anderen Daten, die Sie möglicherweise benötigen, speichern. Zum Beispiel:

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]; 
} 

Weiterführende Literatur:

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

Answer 2

Wie Andy E sagte. Verfolgen Sie, wie viele Zeiger Sie auf Ihrem Bildschirm haben und speichern Sie Eigenschaften von jedem von ihnen (in Ihrem Fall x und y Koordinaten, erworbenes Formularereignis)

Ein schönes Beispiel für Multitouch finden Sie hier: http://ie.microsoft.com/testdrive/Graphics/TouchEffects/ und Sie können in die gehen Code mit F12-Tools und erhalten Sie alle den Code unter dem Tag Script:

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

Hoffe, es hilft

Answer 3

Wenn Sie 8 sind auf einem Windows: http://ie.microsoft.com/testdrive/Graphics/TouchEffects/Demo.js

es Sie diesen Teil des Codes finden Plattform, IE10 unterstützt das MSGesture-Objekt. Dieses Objekt kann wie die iOS-Version von Gestenereignissen verwendet werden. Um das Objekt zu initialisieren, müssen wir das Zielobjekt festlegen und den MSPointer in MSPointerDown hinzufügen. Zum Beispiel:

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

Von hier aus können Sie einen Ereignis-Listener hinzufügen, für die MSGestureChange Funktion der event.scale Eigenschaft zu verarbeiten. Beachten Sie, dass eine ungültige InvalidStateError-Ausnahme auftritt, wenn das Ziel nicht festgelegt ist.