畫布：當* border *存在時獲取鼠標座標

有很多關於Stackoverflow的討論，關於如何在Canvas中獲取鼠標座標。我終於發現，在https://stackoverflow.com/a/5417934列出的解決方案很適合我，但有一個例外：畫布：當* border *存在時獲取鼠標座標

如果我把一個樣式定義爲畫布邊境進入我的文檔，即

<style> 
    canvas { border: 42px solid red; } 
</style>

鼠標的位置，我得到是完全由邊框尺寸決定的（我可以通過邊框尺寸來輕鬆驗證）。作爲一個臨時的解決方案，我手動調節由邊框大小的鼠標座標，其中包含用於獲取鼠標下面的函數結束了座標：

function getCursorPosition1(event) { 
    var canoffset=$('#pinaka').offset(); // Id of canvas is 'pinaka' 
    var x=event.clientX+document.body.scrollLeft+document.documentElement.scrollLeft-Math.floor(canoffset.left) - 42; 
    var y=event.clientY + document.body.scrollTop + document.documentElement.scrollTop - Math.floor(canoffset.top) + 1 - 42; 
    return [x,y] 
}

當然，這是醜陋的。有沒有辦法在我的代碼中自動派生邊框大小？

來源

2013-12-11 user1934428

使用getClientBoundingRect是要走的路：http://stackoverflow.com/questions/20060691/most-modern-method-of-getting-mouse-position-within-a-canvas-in-native-javascrip/20061533 ＃20061533 – GameAlchemist

謝謝了很多;結合我對我的問題得到的回答和評論，我結束了以下解決方案：

var can=document.getElementById("pinaka"); 
function getCursorPosition(event) { 
var computedStyle = window.getComputedStyle(can,null); 
var topBorder=parseInt(computedStyle.getPropertyValue("border-top-width"),10); 
var leftBorder=parseInt(computedStyle.getPropertyValue("border-left-width"),10); 
var rect=can.getBoundingClientRect(); 
var x=event.clientX - rect.left - leftBorder; 
var y=event.clientY - rect.top - topBorder; 
return [x,y] 
}

這似乎爲（少數）情況下，我嘗試提供正確的值。

來源

2013-12-16 15:05:10 user1934428

您可以使用window.getComputedStyle獲取邊框寬度。

<canvas id="canvas"></canvas> 

var canvas = document.getElementById("canvas"); 
var computedStyle = window.getComputedStyle(canvas,null); 
var topBorder=computedStyle.getPropertyValue("border-top-width"); 
var leftBorder=computedStyle.getPropertyValue("border-left-width"); 
var bottomBorder=computedStyle.getPropertyValue("border-bottom-width"); 
var rightBorder=computedStyle.getPropertyValue("border-right-width");

（需要IE9 +）

來源

2013-12-11 17:05:28 markE

畫布：當* border *存在時獲取鼠標座標

回答

相關問題