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 のサファリで実行すると、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 に答える