0

下にスクロールしてキャンバスの下部を見ると、描画機能は引き続き機能しますが、線はマウスポインターからではありません。http://flamencopeko.net/draw.php http://flamencopeko.net/draw.txt

<canvas id = "can" width = "715" height = "715" 
    style = "position: relative; border: 1px solid; background: #FFFFFF;">
</canvas>

問題はクロスブラウザです。

4

2 に答える 2

1

findxy 関数はキャンバスの絶対位置を使用します。これはスクロールしても変化しませんが、clientX/clientY はキャンバスに対して相対的に変化します。

代わりに getBoundingClientRect() からの情報を使用して、マウス座標をキャンバス座標空間に移動できます。

これを試して：

function findxy(res, e) {
var rect = canvas.getBoundingClientRect();

if (res == 'down') {
    prevX = currX;
    prevY = currY;
    currX = e.clientX  - rect.left;
    currY = e.clientY - rect.top

    flag = true;
    dot_flag = true;
    if (dot_flag) {
        ctx.beginPath();
        ctx.fillStyle = x;
        ctx.fillRect(currX, currY, 2, 2);
        ctx.closePath();
        dot_flag = false;
    }
}
if (res == 'up' || res == "out") {
    flag = false;
}
if (res == 'move') {
    if (flag) {
        prevX = currX;
        prevY = currY;
        currX = e.clientX - rect.left;
        currY = e.clientY - rect.top
        draw();
    }
}

}

getBoundingClientRect() は、ビュー ポート (clientX/clientY と同じ) に対するキャンバスの座標をフェッチするため、スクロールの影響を受けません。

于 2013-07-15T01:27:24.277 に答える
0

ここで何が問題なのかはわかっていましたが、確認するためにあなたのサイトをざっと見てみました。したがって、ウィンドウがスクロールされた量を追加するだけです。私が見ることができることから、次のように findxy() 関数内に挿入する必要があります。

currX = window.pageXOffset + e.clientX - canvas.offsetLeft;
currY = window.pageYOffset + e.clientY - canvas.offsetTop;

説明すると、イベント オブジェクトの clientX と clientY の値は、ページ全体ではなく、ユーザーの画面の左上を基準にしてマウスの位置を計算します。そのため、ウィンドウ オブジェクトからページ オフセット値も追加する必要があります。

于 2013-07-15T01:32:32.943 に答える