html - 绘制的线从鼠标指针偏移

Question

如果我向下滚动查看画布的底部，绘图功能仍然有效，但线条不是来自鼠标指针。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>

问题是跨浏览器。

Answer 1

你的 findxy 函数使用画布的绝对位置，当你 scoll 时它不会改变，但是 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 相同），因此不受滚动影响。

Answer 2

我很确定我知道这里的问题是什么，但我快速浏览了您的网站以确保。所以你需要做的就是添加窗口已经滚动了多少。从我可以看到它应该像这样插入到你的 findxy() 函数中：

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

所以解释一下，来自事件对象的 clientX 和 clientY 值计算鼠标相对于用户屏幕左上角的位置，而不是整个页面。这就是为什么我们还需要从窗口对象中添加页面偏移值。