0

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

我正在使用此答案中的平移和缩放代码：

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;
};

示例网站

4

1 回答 1

-3

如果您只是想在单击后获取鼠标 X 和 Y 的位置，那么您应该mousedown在 Javascript 中为事件附加一个函数。这称为事件绑定。简而言之，在 DOM 中，您可以将事件绑定到页面中的元素。 这是我制作的一个示例，它显示了一个绑定到#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 元素内的相对位置。有多种方法可以做到这一点，我不会在这里详细介绍，但我将在下面介绍一些方法。祝你好运！

资源

于 2012-10-26T00:46:26.427 回答