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

问题描述

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

I am using the ariutta svg-pan-zoom library. I have a SVG file with viewBox="0 0 1052.3622 744.09448"and div container with width=649 and heigth=525,59.I'm trying to get cursor location inside my 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正确).例如:

It works fine until zoom equals 1 (default zoom level). When zoom is greater than 1 the y value is wrong (x is good).For example:

1. 我在某个时间点单击，结果是x: 197.82463543913713, y: 616.3652582594272
2. 使用鼠标滚轮缩放(zoom: 3.9562617313728334，光标仍在屏幕上的同一点).
3. 再次单击，结果为x: 197.82463192575807, y: 540.7407139122004

1. I click at some point and the result is x: 197.82463543913713, y: 616.3652582594272
2. zoom using mousewheel (zoom: 3.9562617313728334, cursor is still at the same point on the screen).
3. click again and the result is x: 197.82463192575807, y: 540.7407139122004

我一直在尝试许多代码组合，但是没有什么效果很好.我不知道该怎么做.我缺少明显的东西吗?有没有更好的解决方案来获取光标位置?

I've been trying many combinations of code, but nothing works good. I have no idea how to do this. Am I missing something obvious?Is there any better solution to get cursor position?

推荐答案

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

I'm an idiot! I had a bug in the other part of my code. That is why I thought that the y value was correct for zoom == 1 - in fact it wasn't.

这对我有用:

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

这篇关于使用svg-pan-zoom缩放后的光标位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！