單擊事件座標不同於形狀位置

我對畫布和JavaScript都很新。我試圖製作一個按鈕，當你點擊它時做了一些事情。當我爲按鈕創建一個點擊事件時，我無法弄清楚它爲什麼不起作用。然後，當我嘗試進行故障排除時，發現矩形形狀的x，y座標與點擊事件說的我點擊的位置完全相關。我完全困惑。我添加了一些代碼，以確保我不是瘋了。點擊說，儘管位於畫布的最左邊，我的座標在X軸上開始高很多。單擊事件座標不同於形狀位置

形狀是在X = 565 的點擊說我在X = 1161

這裏是我的代碼：

function bigButton(x, y, strTxt) 
{ 
    var getID = document.getElementById("canvas_1"); 

    if (getID.getContext) 
    { 
     var btnCtx = getID.getContext("2d"); 

     btnCtx.font = "Italic 32pt Times"; 
     btnCtx.textAlign = "center"; 
     btnCtx.textBaseline = "middle"; 

     var btnW = 150; 
     var btnH = 50; 
     var cx = x - btnW/2; 
     var cy = y - btnH/2; 
     var left = cx; 
     var right = cx + btnW; 
     var top = cy; 
     var bottom = cy + btnH; 

     btnCtx.strokeRect(cx, cy, btnW, btnH); 
     btnCtx.fillText(strTxt, x, y); 
     btnCtx.font = "24pt Helvetica"; 
     btnCtx.fillText("Coordinates of Rectangle: X = " + cx + " Y = " + cy, cx, cy + 90); 

     getID.addEventListener("click", function(event) 
     { 
      var clickX = event.x; 
      var clickY = event.y; 
      alert(clickX + " " + clickY); 

     }, false); 
    } 
}

enter image description here

來源

2014-04-04 Nathan McKaskle

事件中的客戶座標是相對的到客戶窗口。您目前使用的x和y屬性不是standard event的一部分，因此無論如何都應避免使用它們。請使用clientX/Y或其他替代方法之一。

爲了使它們相對於畫布，您可以簡單地減去畫布的絕對位置。

這裏是做這件事的一種方法：

getID.addEventListener("click", function(event) { 

    var rect = getID.getBoundingClientRect(); // get abs. region of canvas 
    var clickX = event.clientX - rect.left; // adjust x 
    var clickY = event.clientY - rect.top;  // adjust y 

    alert(clickX + " " + clickY); 

}, false);

另外，還要確保你沒有使用CSS設置畫布大小，但它的width和height屬性（或屬性，如果在JS完成）爲將位圖被縮放到也影響鼠標位置的元素大小（相對於位圖）。

如果將填充或邊框應用於畫布，它們也會影響相對位置。請執行：

保證金更換填充（保證金不影響客戶端RECT），並設置display: block;
裹帆布到父div元素，並應用CSS規則母公司，而不是
減去邊框/填充頂部/左側尺寸公式

來源

2014-04-04 22:33:29 K3N

@Teemu是的，我注意到了。我會做筆記。 – K3N

我試過這個，用event.clientX/Y，它確實把0放在畫布的左上角，但是，它仍然認爲矩形是900而不是1164.所以更接近，但並不完全。順便說一下，傳遞給函數的x和y變量是基於畫布寬度和高度的一半，因此按鈕會出現在中間。 –

@Sephethus您是否使用width/height屬性（不是CSS）正確設置了畫布的大小？填充和邊框會影響客戶端矩陣。 – K3N

單擊事件座標不同於形狀位置

回答

相關問題