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

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

我的代码：

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很好）。例如：

我按在某些时候，结果是使用鼠标滚轮（zoom: 3.9562617313728334，光标仍停留在屏幕上同一点）x: 197.82463543913713, y: 616.3652582594272
变焦。再次
点击结果是x: 197.82463192575807, y: 540.7407139122004

我一直在努力的代码中的许多组合，但没有什么工作好。我不知道如何做到这一点。我错过了明显的东西吗？有没有更好的解决方案来获取光标位置？

来源

2016-09-14 D. Wiśniewski

我认为原产地是左上角，所以你必须为'你做了'y' x'做同样的计算。像'x =（divY - currentPan.y）/ realZoom;' – bumbu

我是个白痴！我在我的代码的其他部分有一个错误。这就是为什么我认为y值是正确的zoom == 1 - 事实上并非如此。

这个工作对我来说：

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

来源

2016-09-19 09:24:07

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

回答

相关问题