变换后如何获取鼠标坐标

Question

如何在画布平移和缩放后获得鼠标单击图像的 x 和 y 像素值？事件 x 和 y 需要计算什么？

我正在使用来自this answer 的平移和缩放代码：

var zoom = function(clicks) {
    var pt = ctx.transformedPoint(lastX,lastY);
    ctx.translate(pt.x,pt.y);
    var factor = Math.pow(scaleFactor,clicks);
    ctx.scale(factor,factor);
    ctx.translate(-pt.x,-pt.y);
    redraw();
}

var handleScroll = function(evt) {
    var delta = evt.wheelDelta ? evt.wheelDelta/40 : evt.detail ? -evt.detail : 0;
    if (delta) zoom(delta);
    return evt.preventDefault() && false;
};

Example website

Answer 1

如果您只是想在单击后获取鼠标 X 和 Y 的位置，那么您应该在 Javascript 中将函数附加到 mousedown 事件。这称为事件绑定。简而言之，在 DOM 中，您可以将事件绑定到页面中的元素。 Here's an example I made 显示绑定到 #box 元素的事件。

document.getElementById("box").onmousedown = function() {
    var posx = 0;
    var posy = 0;
    if (!e) var e = window.event;
    if (e.pageX || e.pageY)     {
        posx = e.pageX;
        posy = e.pageY;
    }
    else if (e.clientX || e.clientY)     {
        posx = e.clientX + document.body.scrollLeft
            + document.documentElement.scrollLeft;
        posy = e.clientY + document.body.scrollTop
            + document.documentElement.scrollTop;
    }

    alert("Mouse x: " + posx + "\nMouse y: " + posy);
};​

这段代码找到一个ID为box的元素，并告诉函数中的代码在每次按下鼠标后运行。在此示例中，我们还回退到旧系统，以确保它可以跨平台和跨浏览器工作。如果您想将此事件绑定到整个网页而不仅仅是一个元素，那么您可以将document.getElementById("box") 替换为window。

然而，这不会计算 DOM 元素内的相对位置。有多种方法可以做到这一点，我不会在这里详细介绍，但我将在下面介绍一些方法。祝你好运！

资源

• More on handling mouseclicks in Javascript
• Relative position of mouse clicks within an element
• jQuery solution for the previous link