5

我正在开发插件 flot.touch.js，它在 webkit 浏览器的图表上添加触摸交互（平移和缩放）。我也想让它在 IE10 上工作，但我不知道如何检索我的接触点之间的空间（我需要这个来计算比例）。

在 webkit 浏览器上，我们可以通过使用这些变量来做到这一点：

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

3 回答 3

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

进一步阅读：

于 2013-04-04T13:26:25.987 回答
4

就像安迪 E 说的。跟踪屏幕上有多少指针并存储每个指针的属性（在您的情况下，x 和 y 坐标，获取的表单事件）

可以在这里找到一个很好的多点触控示例：http: //ie.microsoft.com/testdrive/Graphics/TouchEffects/，您可以使用 F12 工具进入代码并获取 Script 标签下的所有代码：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};
    }
}

希望能帮助到你

于 2013-04-04T13:36:52.317 回答
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 异常。

于 2013-05-08T15:11:14.627 回答