Question

我最终实现了使用此代码作为基础https://stackoverflow.com/a/3151987/5221943来实现可缩放和平移画布。现在，我需要检测用户在画布内单击的实际坐标。考虑到用户已经放大或平移了画布，我不知道如何将鼠标页面坐标转换为现实世界坐标。这里有什么建议吗？

Answer 1

这是用于选通画布坐标的代码

Call the DumpInfo function in the html canvas tag like 
 <canvas id="canvas" width="600" height="200" onmousedown="DumpInfo(event)"></canvas>
Bellow two functions defined 
 <script type = "text/javascript" >
    function DumpInfo(event) {
        var info = document.getElementById("canvas");
    //info.innerHTML += event.type + ", ";
        var pos = getMousePos(info, event);
        alert(pos.x);
        alert(pos.y);
        }
        function getMousePos(canvas, evt) {
            var rect = canvas.getBoundingClientRect();
            return {
                x: evt.clientX - rect.left,
                y: evt.clientY - rect.top
            };
        }
    </script>

HTML 5 Canvas-缩放时获取真实坐标

1 个答案: