2013-04-04 52 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