1

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

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

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

我找到了这篇文章，但它没有解决大小不同的窗口：
平移到特定的 X 和 Y 坐标和中心图像 svg-pan-zoom

4

1 回答 1

0

平移和缩放是相对于当前容器大小的。所以你想要的是计算可见 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 轴执行相同操作

于 2015-11-12T22:09:24.780 回答