Question

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

我想保存svg-pan-zoom svg的平移和缩放值等值，并使用这些值使用具有不同大小窗口的浏览器跳转到同一位置。

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

我找到了这篇文章，但它没有解决一个不同大小的窗口：
Pan to specific X and Y coordinates and center image svg-pan-zoom

Answer 1

平移和缩放与当前容器大小有关。所以你想要的是计算可见SVG部分的中心点。然后在新窗口中计算新的pan应该具有该SVG的点（在前一种情况下是中心）。关于缩放，它取决于你想要如何工作，但你可以使用真正的缩放。

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

所以例如计算x轴do：

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轴执行相同操作

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

1 个答案: