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 的平移和缩放值等值，并使用这些值使用不同大小的浏览器跳转到相同位置 window。

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

我找到了这篇文章，但它没有解决 window 大小不同的问题：

Answer 1

平移和缩放是相对于当前容器大小的。所以你想要的是计算可见 SVG 部分的中心点。然后在 new window 中计算新的 pan 应该有那个 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 轴做同样的事情

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

svg-pan-zoom -- Pan and zoom to same location in different browser sizes

javascript

svg

zooming

pan

svgpanzoom