缩放后确定鼠标在 HTML5 画布上的位置

Question

我正在开发一些涉及使用画布的 HTML5 软件。有一个画布，我需要能够在其中缩放并允许用户通过单击鼠标在画布上涂鸦。到目前为止，在我找到的一些示例的帮助下，我已经使缩放工作了。问题是缩放后，我的绘图工具上的鼠标位置不正常。在任何缩放之前，我可以画得很好。这是缩放的代码：

//Zoom
        mainCanvas.onmousewheel = function(event) {
            var mousex = event.clientX - mainCanvas.offsetLeft;
            var mousey = event.clientY - mainCanvas.offsetTop;
            var wheel = event.wheelDelta / 120;
            //n or -n

            var zoom = 0;
            if(wheel < 0) {
                zoom = 1 / 2;
                if(currentzoom == 1)
                    return;
            } else {
                mousex = event.clientX - mainCanvas.offsetLeft;
                mousey = event.clientY - mainCanvas.offsetTop;
                zoom = 2;
                if(currentzoom == 32)
                    return;
            }
            currentzoom *= zoom;
            mainContext.translate(originx, originy);

            mainContext.scale(zoom, zoom);
            mainContext.translate(-(mousex / scale + originx - mousex / (scale * zoom ) ), -(mousey / scale + originy - mousey / (scale * zoom ) ));
            originx = (mousex / scale + originx - mousex / (scale * zoom ) );
            originy = (mousey / scale + originy - mousey / (scale * zoom ) );
            scale *= zoom;
            draw(mainContext, gridArray);
        }

就像我说的，变焦不是实际问题，只是问题的根源。这是确定绘图工具鼠标位置的代码：

//this function determines the mouse position relative to the canvas element
        function ev_canvas(ev) {
            if(ev.layerX || ev.layerX == 0) {//Firefox, IE
                ev._x = ev.layerX;
                ev._y = ev.layerY;
            } else if(ev.offsetX || ev.offsetX == 0) {//Opera
                ev._x = ev.offsetX;
                ev._y = ev.offsetY;
            }

            var func = tool[ev.type];
            if(func) {
                func(ev);
            }
        }

我确定问题出在后面的代码块中，但我不确定要解决它。任何帮助，将不胜感激。

Answer 1

我怀疑这是一段依赖于某些全局变量的代码片段，例如currentzoom

因此，如果我正确理解这个问题，问题就在于如何使用画布进行鼠标控制和缩放。我怀疑当你缩放时，DOM 会将鼠标光标放置在图片上最初渲染时所属的位置。因此，如果放大 200% 并将鼠标放置在画布中心左侧 100 像素处，则画布的行为就像鼠标位于中心左侧 200 像素处一样。

currentzoom = 1;
originX = 0;
originY = 0;

function ev_canvas(ev) {
        if(ev.layerX || ev.layerX == 0) {//Firefox, IE
            ev._x = ev.layerX * currentzoom / 1 - originX;
            ev._y = ev.layerY * currentzoom / 1 - originY;
        } else if(ev.offsetX || ev.offsetX == 0) {//Opera
            ev._x = ev.offsetX * currentzoom / 1 - originX;
            ev._y = ev.offsetY * currentzoom / 1 - originY;
        }

        var func = tool[ev.type];
        if(func) {
            func(ev);
        }
    }

被/ 1保留，以防将来用户想要将非“1”值设置为currentzoom。