Question

我正在开发一个HTML5 Canvas项目，同时为移动设备添加多点触控支持，我似乎在iOS 7.1的Mobile Safari上遇到了一个问题。

用户与我的应用互动的主要方式是点击并拖动。在桌面上，我将适当的鼠标事件监听器添加到我的画布......

c.addEventListener('mousedown', mouseDown, false);
c.addEventListener('mousemove', mouseMoved, false);
c.addEventListener('mouseup', mouseUp, false);

...让这些事件处理程序计算鼠标位置并调出一个更通用的函数，只接受事件的X和Y位置......

function mouseDown(evt) 
{
    var pos = getMousePos(evt);
    inputDown(pos);
}

function mouseUp(evt) 
{
    var pos = getMousePos(evt);
    inputUp(pos);
}

function mouseMoved(evt) 
{
    var pos = getMousePos(evt);
    inputMoved(pos);
}

function getMousePos(evt) 
{
    var rect = c.getBoundingClientRect();
    return { 'x': evt.clientX - rect.left, 'y': evt.clientY - rect.top }
}

......一切都很好。我设计了这种抽象级别，以便轻松扩展到其他输入方法。所以现在我尝试使用Touch API来扩展它。首先，我将处理程序添加到鼠标处理程序旁边的画布上......

c.addEventListener("touchstart", touchDown, false);
c.addEventListener("touchmove", touchMoved, false);
c.addEventListener("touchend", touchUp, false);
c.addEventListener("touchcancel", touchUp, false);

...然后添加我的瘦事件处理程序以抽象出触摸事件......

function touchDown(evt) 
{
    evt.preventDefault();

    // Ignore touches after the first.
    if (activeTouch != null)
        return;

    if (evt.changedTouches.length > 0)
    {
        activeTouch = evt.changedTouches[0].identifier;
        var pos = getTouchPos(evt);
        inputDown(pos);
    }
}

function touchUp(evt) 
{
    var pos = getTouchPos(evt);
    activeTouch = null;
    inputUp(pos);
}

function touchMoved(evt) 
{
    var pos = getTouchPos(evt);
    inputMoved(pos);
}

function getTouchPos(evt) 
{
    var canX = 0;
    var canY = 0;

    for( var i = 0; i < evt.touches.length; i++ )
    {
        if (evt.touches[i].identifier == activeTouch)
        {
            canX = evt.touches[i].pageX - c.offsetLeft;
            canY = evt.touches[i].pageY - c.offsetTop;
            break;
        }
    }

    return { 'x': canX, 'y': canY }
}

......这就是我遇到麻烦的地方！你可以看到事情有点毛茸茸但效率低下，我想我正在使用一切。问题是getTouchPos(evt)似乎无法在touchstart上获得正确的X，Y位置。在我第一次接触时，我获得了0,0的位置。如果我拖动手指，touchmove会多次触发，并且报告的X，Y坐标看起来很好。如果我抬起手指，touchend会发射，我也会找到正确的位置。但是，如果我再次触摸，touchstart会触发，而不是我触摸的地方，我会得到我最后一次触摸结束的X，Y坐标！

我已经使用了调试器，当然，我在事件数据中获得的Touch对象中的陈旧/未初始化值就在那里。我做了什么明显错误的事吗？我不明白为什么我似乎从touchstart事件中得到了不好的坐标。我该怎么做才能解决这个问题？我可以使用另一个来源来获得正确的位置吗？对事件顺序的细微调整？

Here's a link to an online demo of the full code if you'd like to run some in-browser debug.

并提前感谢您的帮助。

Answer 1

我不确定它是否显而易见，但这是一个有趣的调试问题。所以基本上，混乱归结于这个人：

function mouseMoved(evt) {
    var pos = getMousePos(evt);
    inputMoved(pos);
}

对于您的鼠标事件，一切都很有效，因为您必须mousemove。

c.addEventListener('mousemove', mouseMoved, false);

哪个电话

function mouseMoved(evt) {
    var pos = getMousePos(evt);
    inputMoved(pos);
}

因此，当您移动鼠标时，您的posX/posY值会不断更新。（希望你现在看到问题：）

对于TouchEvents，当用户触摸（但不移动）时，您只会触发touchstart和touchend。只有在用户拖动时，touchmove才会被调用，而touchMoved会调用函数inputMoved（调用posX/posY - 更新inputMoved值。< / p>

在您的网页上解决此问题的最简单方法就是在touchstart和touchmove中调用MassHaver，以便您的{{1}}实例具有最新状态。

触摸事件“touchstart”在Mobile Safari上返回错误的位置。解决方法？

1 个答案: