缩放图片时使鼠标坐标正确

我正在尝试开发脚本，我可以点击图像并获得点击的X / Y. 这部分我实现了，当我尝试缩放图片时出现的问题。 随后点击缩放图片应返回相同的坐标，这就是我未能成功的地方。

clicked(event) { let pos_x = event.offsetX ? (event.offsetX) : event.pageX - document.getElementById("pointer_div").offsetLeft; let pos_y = event.offsetY ? (event.offsetY) : event.pageY - document.getElementById("pointer_div").offsetTop; let offsetLeft = document.getElementById("textLayer").offsetWidth; let offsetTop = document.getElementById("textLayer").offsetHeight; console.log("zoom " + this.zoom); console.log("pozycja x " + event.clientX/this.zoom); console.log("pozycja y " + event.clientY/this.zoom); console.log("szerokosc elementu " + offsetLeft); console.log("wysokosc elementu " + offsetTop); } zoomView(): void { this.zoom = this.zoom + 2.0; } 

这就是我写的。 以及组件的模板：

Answer 1

因为我找到了一个解决方案=>

  var x = event.pageX - (document.getElementById("textLayer").offsetLeft); var y = event.pageY - (document.getElementById("textLayer").offsetTop); console.log("zoom " + this.zoom); console.log("pozycja x " + x/this.zoom); console.log("pozycja y " + y/this.zoom); console.log("szerokosc elementu " + offsetLeft); console.log("wysokosc elementu " + offsetTop); console.log("wysokosc elementussssssssssssss " + offsetTop);