缩放后确定鼠标在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被保留，以防将来的用户想要为currentzoom设置非“ 1”值。

Answer 2

对于Joomla网站，您可以使用Mouse Over Zoom-这是一个Joomla扩展程序，它使您可以从Joomla网页上查看较大版本的缩略图。现在，您可以轻松浏览图像库：只需将鼠标光标移到缩略图上即可查看完整尺寸的图像，而无需加载新页面。在此处下载http://joomlaboat.com/mouse-over-zoom

Answer 3

只需尝试一下：

Answer 4

我有一个更好的脚本来让鼠标在画布上定位：