使用 svg-pan-zoom 缩放后的光标位置

Question

我正在使用 ariutta svg-pan-zoom 库。 我有一个带有viewBox="0 0 1052.3622 744.09448"的 SVG 文件和带有width=649和heigth=525,59 div 容器。 我正在尝试在我的 SVG 中获取光标位置。

我的代码：

var divX = ev.pageX - this.offsetLeft;
var divY = ev.pageY - this.offsetTop;

var currentPan = panZoom.getPan();
var realZoom = panZoom.getSizes().realZoom;
var panZoomHeight = panZoom.getSizes().height;
var viewboxHeight = panZoom.getSizes().viewBox.height;

var x = (divX - currentPan.x) / realZoom;
var y = ((panZoomHeight - divY - ((panZoomHeight-(viewboxHeight*realZoom))/2) + currentPan.y) / realZoom);

var zoom = panZoom.getZoom(); // only to explain my problem - I'm not using this value 

它工作正常，直到zoom等于 1（默认缩放级别）。 当缩放大于 1 时， y值是错误的（ x是好的）。 例如：

1. 我在某个点单击，结果是x: 197.82463543913713, y: 616.3652582594272
2. 使用鼠标滚轮zoom: 3.9562617313728334 （ zoom: 3.9562617313728334 ，光标仍位于屏幕上的同一点）。
3. 再次点击，结果是x: 197.82463192575807, y: 540.7407139122004

我一直在尝试多种代码组合，但没有任何效果。 我不知道该怎么做。 我错过了一些明显的东西吗？ 有没有更好的解决方案来获取光标位置？

Answer 1

我是个白痴！ 我的代码的另一部分有一个错误。 这就是为什么我认为 y 值对于zoom == 1是正确的 - 事实上它不是。

这对我有用：

var y = (panZoomHeight - divY - (panZoomHeight-(viewboxHeight*realZoom)) + currentPan.y) / realZoom;