HTML 5 Canvas-縮放時獲取真實坐標

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>