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元素中的相对位置。有多种方法可以做到这一点，我在这里不会详细介绍，但我将在下面介绍几种方法。祝你好运！

<强>资源

如何在变换后获得鼠标坐标

1 个答案: