绘制线与鼠标指针偏移

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

问题是跨浏览器。

来源

2013-07-15 Ole Sørensen

我想你需要检查你的'findxy'函数。 – uoryon

您的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-15 01:27:24

作品！非常感谢。 http://flamencopeko.net/draw_02.php –

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

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

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

来源

2013-07-15 01:32:32

我使用Zekian的代码，但这也有道理。谢谢大家！ –

绘制线与鼠标指针偏移

回答

相关问题