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

Question

我正在使用 ariutta svg-pan-zoom 库。我有一个包含 viewBox="0 0 1052.3622 744.09448" 的 SVG 文件 div 容器 width=649 和 heigth=525,59。我正在尝试在我的 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 是好的）。例如：

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

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

Answer 1

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

这对我有用：

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

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

Cursor location after zoom using svg-pan-zoom

javascript

svg

svgpanzoom