Question

我对画布和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

Answer 1

事件中的客户端坐标是相对于客户端窗口的。您当前使用的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中完成的属性），因为位图将缩放到元素大小影响鼠标位置（相对于位图）。

如果对画布应用填充或边框，它们也会影响相对位置。做其中之一：

用边距替换填充（边距不影响客户端矩形）并设置display: block;
将画布包装到父div元素中，然后将CSS规则应用于父级
在公式

单击“事件坐标”与“形状位置”不同

1 个答案: