svg-pan-zoom-以不同的浏览器大小平移和缩放到同一位置

Question

我正在使用ariutta svg-pan-zoom库（ https://github.com/ariutta/svg-pan-zoom ）。 （还与jquery.layout.js窗格和jquery-ui.js一起使用）

我想保存诸如svg-pan-zoom svg的pan和zoom值之类的值，并使用带有不同大小窗口的浏览器使用这些值跳转到相同位置。

目前，我正在使用getPan（）和getZoom（）保存值； 然后在另一个浏览器中缩放（缩放）和平移（平移）以缩放和平移到同一位置。 当浏览器窗口大小不同时，这将不起作用。

我找到了这篇文章，但它没有解决其他尺寸的窗口：
平移到特定的X和Y坐标以及中心图像svg-pan-zoom

Answer 1

平移和缩放是相对于当前容器大小的。 因此，您想要的是计算可见SVG零件的中心点。 然后在新窗口中计算应该具有该SVG点（在先前情况下为中心）的新平移。 至于缩放，取决于您要如何使它起作用，但是您可以使用实际缩放。

要获取容器大小和实际缩放，请使用instance.getSizes() 。

因此，例如要计算x轴，请执行以下操作：

var s = instance.getSizes()
var p = instance.getPan()
var relativeX = s.width / 2 / (p.x + s.viewBox.width * s.realZoom)

// After resize
var s = instance.getSizes()
var p = instance.getPan()
var x = (s.width / 2 / relativeX) - s.viewBox.width * s.realZoom
instance.pan({x: x, y: 0})

对Y轴做同样的事情