缩放后确定HTML5画布上的鼠标位置 [英] Determining mouse position on an HTML5 canvas after zooming

问题描述

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

So, I'm working on developing some software in HTML5 which involves the use of canvases. There is one canvas in which I need to be able to zoom and allow the user to doodle on the canvas on mouse clicks. So far, I have gotten the zoom to work, with help from some examples I found. The problem is that after zooming, the mouse position on my drawing tool is out of whack. Before any zooming, I can draw just fine. Here is the code for the zoom:

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

像我说的，缩放不是实际的问题，只是根问题。下面是确定绘图工具鼠标位置的代码：

Like I said, the zoom is not the actual problem, just the root of the problem. Here is the code which determines mouse position for the drawing tool:

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

我相信问题出在后者代码块，但我不知道解决它。

I'm sure that the problem lies in the latter block of code, but I'm not sure out to fix it. Any help would be appreciated.

推荐答案

我有一个更好的脚本来获取鼠标在画布上的位置：

I got a better script to get mouse position on the canvas:

function writeMessage(canvas, message) {
        var context = canvas.getContext('2d');
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.font = '18pt Calibri';
        context.fillStyle = 'black';
        context.fillText(message, 10, 25);
      }
      function getMousePos(canvas, evt) {
        var rect = canvas.getBoundingClientRect(), root = document.documentElement;

        // return relative mouse position
        var mouseX = evt.clientX - rect.top - root.scrollTop;
        var mouseY = evt.clientY - rect.left - root.scrollLeft;
        return {
          x: mouseX,
          y: mouseY
        };
      }

      window.onload = function() {
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');

        canvas.addEventListener('mousemove', function(evt) {
          var mousePos = getMousePos(canvas, evt);
          var message = "Mouse position: " + mousePos.x + "," + mousePos.y;
          writeMessage(canvas, message);
        }, false);
      };

试试看，如果有任何问题，请评论。

Try it out, comment if any issues..

这篇关于缩放后确定HTML5画布上的鼠标位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！