0

我正在使用 ariutta svg-pan-zoom 库。我有一个 SVG 文件，其中viewBox="0 0 1052.3622 744.09448" 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很好）。例如：

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

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

4

1 回答 1

0

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

这对我有用：

var y = (panZoomHeight - divY - (panZoomHeight-(viewboxHeight*realZoom)) + currentPan.y) / realZoom;
于 2016-09-19T09:24:07.780 回答