0

我一直在阅读非常有用的书“Core HTML5 Canvas”，它包含一个在同一功能中包含鼠标点击和触摸的示例。我的版本（与书非常相似）如下：

function windowToCanvas(x, y) {
    var bbox = canvas.getBoundingClientRect();

    return { x: x - bbox.left * (canvas.width /bbox.width), y: y - bbox.top * (canvas.height / bbox.height)};
};

canvas.ontouchstart = function(e) {
    e.preventDefault(e);
    MTStart(windowToCanvas(e.pageX, e.pageY));
};

canvas.ontouchmove = function(e) {
    e.preventDefault(e);
    MTMove(windowToCanvas(e.pageX, e.pageY));
};

canvas.ontouchend = function(e) {
    e.preventDefault(e);
    MTEnd(windowToCanvas(e.pageX, e.pageY));
};

canvas.onmousedown = function(e) {
    e.preventDefault(e);
    MTStart(windowToCanvas(e.pageX, e.pageY));
};

canvas.onmousemove = function(e) {
    e.preventDefault(e);
    MTMove(windowToCanvas(e.pageX, e.pageY));
};

canvas.onmouseup = function(e) {
    e.preventDefault(e);
    MTEnd(windowToCanvas(e.pageX, e.pageY));
};

function MTStart(location) {
    console.log("Mouse down");
    document.getElementById('message').innerHTML = 'MT Start x: ' + location.x + ', y: ' + location.y;
};

function MTMove(location) {

};

function MTEnd(location) {
    console.log("Mouse up");
    document.getElementById('message').innerHTML = 'MT End x: ' + location.x + ', y: ' + location.y;
};

这适用于鼠标。但是，在 iphone 或 ipad 上的 safari 上运行时，ontouchstart 似乎报告了正确的位置，而 ontouchend 则没有。无论我触摸哪里，Ontouchend 都会给出相同的坐标。我注意到当且仅当我稍微滚动页面并触摸画布中的相同位置时，它返回的坐标似乎才会改变。

知道为什么 ontouchstart 和 ontouchend 会给出不同的位置值吗？

谢谢！

4

1 回答 1

0

所以，事实证明我需要使用：

MTEnd(windowToCanvas(e.changedTouches[0].pageX, e.changedTouches[0].pageY));

但仅适用于 ontouchend，而不适用于 ontouchstart。

于 2012-08-22T07:52:04.653 回答