javascript - 单击事件坐标与形状位置不同

Question

我对 canvas 和 javascript 都很陌生。我试图制作一个按钮，当您单击它时它会执行某些操作。当我为按钮创建点击事件时，我无法弄清楚为什么它不起作用。然后，当我尝试进行故障排除时，我发现矩形的 x、y 坐标与点击事件显示我正在点击的位置完全不同。我完全不知所措。我添加了一些代码只是为了确保我没有发疯。咔嗒声表明我的坐标在 X 轴上开始得更高，尽管它位于 Canvas 的最左侧。

形状在 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);
    }
}

Answer 1

事件中的客户端坐标是相对于客户端窗口的。您当前使用的 x 和 y 属性不是 standard event 的一部分所以无论如何都应该避免使用它们。请改用 clientX/Y 或其中之一。

为了使它们相对于 Canvas ，您可以简单地减去 Canvas 的绝对位置。

这是一种实现方式:

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 设置 Canvas 大小，但它是 width 和 height 属性(或属性，如果在 JS 中完成)，因为位图将被缩放元素大小也会影响鼠标位置(相对于位图)。

如果您对 Canvas 应用填充或边框，它们也会影响相对位置。执行以下任一操作:

1. 用margin替换padding(margin不影响client rect)并设置display: block;
2. 将 Canvas 包裹到父 div 元素中并将 CSS 规则应用于父元素
3. 在公式中减去 border/padding top/left 的大小