javascript - svg-pan-zoom -- 在不同的浏览器尺寸中平移并缩放到同一位置

Question

我正在使用 ariutta svg-pan-zoom 库( https://github.com/ariutta/svg-pan-zoom )。 (也可与 jquery.layout.js Pane 和 jquery-ui.js 一起使用)

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

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

我找到了这篇文章，但它没有解决不同大小的窗口:
Pan to specific X and Y coordinates and center image 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 轴执行相同的操作