javascript - 缩放后确定鼠标在 HTML5 Canvas 上的位置

Question

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

//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

因此，如果我对这个问题的理解正确，那么问题在于您如何使用 Canvas 进行鼠标控制和缩放。我怀疑当您缩放时，DOM 会将鼠标光标放置在图片最初渲染时它所属的位置。因此，如果您放大 200% 并将鼠标放在 Canvas 中心左侧 100 像素处，则 Canvas 的行为就像鼠标位于中心左侧 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。