1

我正在开发一个 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)似乎无法获得正确的 X、Y 位置touchstart。在我第一次触摸时，我的位置为 0,0。如果我拖动手指，touchmove多次开火并且报告的 X、Y 坐标看起来不错。如果我抬起手指，touchend就会着火，我也会得到正确的位置。但是，如果我再次触摸，touchstart触发而不是我触摸的位置，我会得到我最后一次触摸结束的 X，Y 坐标！

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

如果您想运行一些浏览器内调试，这里是完整代码的在线演示的链接。

并提前感谢您的帮助。

4

1 回答 1

3

我不确定这是否很明显，但这是一个有趣的调试问题。所以基本上，困惑归结为这个人：

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两者touchstart，touchmove以便您的MassHaver实例具有最新状态。

于 2014-05-14T08:40:27.060 回答