繪製線與鼠標指針偏移

如果向下滾動以查看畫布底部，繪圖功能仍然有效，但該線不來自鼠標指針。 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的代碼，但這也有道理。謝謝大家！ –

繪製線與鼠標指針偏移

回答

相關問題