2013-04-04 49 views
5

我正在處理插件flot.touch.js,它爲webkit瀏覽器的圖表添加觸摸交互(平移和縮放)。 我也想使它在IE10上工作,但我不知道如何檢索我的觸摸點之間的空間(我需要這個來計算比例)。IE10上觸摸點之間的空間

在WebKit瀏覽器,我們可以通過這些變量做到這一點:

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

回答

4

與IE瀏覽器的指針事件,一個獨立的事件被激發每個觸摸點。與iOS觸摸事件(由其他瀏覽器也實現)不同,每個「指針」的狀態將分別進行跟蹤。考慮它是一個更通用的事件,它將幾個基於指針的輸入設備分組。

每個事件對象都有一個pointerId屬性,可用於跟蹤其狀態。要跟蹤多個觸摸,您需要將該pointerId以及任何其他變量以及您可能需要的任何其他數據一起存儲在事件處理函數範圍外的對象中。例如:

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

延伸閱讀:

4

像安迪電子稱。跟蹤你的屏幕上有多少指針,並存儲每個指針的屬性(在你的情況下,x和y座標,獲取的表單事件)

多點觸摸的一個很好的例子可以在這裏找到:http://ie.microsoft.com/testdrive/Graphics/TouchEffects/,你可以進入與F12工具和代碼拿到劇本標籤下的所有代碼:http://ie.microsoft.com/testdrive/Graphics/TouchEffects/Demo.js

那裏你可以找到這部分代碼:

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

希望它可以幫助

1

如果你在Windows 8平臺,IE10支持MSGesture對象。這個對象可以像iOS版本的手勢事件一樣使用。要初始化對象,我們必須設置目標對象以及在MSPointerDown上添加MSPointer。例如:

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

從這裏,你可以添加一個事件偵聽MSGestureChange函數來處理該event.scale財產。請注意,如果未設置目標,則會發生InvalidStateError異常。

+0

+1,這是有用的知道,謝謝:-) – 2013-05-24 09:56:08