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

【问题标题】：svg-pan-zoom -- Pan and zoom to same location in different browser sizessvg-pan-zoom -- 平移和缩放到不同浏览器大小的相同位置
【发布时间】：2016-02-10 21:31:32
【问题描述】：

我正在使用 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

【问题讨论】：

标签： javascript svg zooming pan svgpanzoom

【解决方案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 轴做同样的事情

【讨论】：

当我打开一个带有 pan x 和 y 变量的新浏览器时，我在哪里将它们插入到这段代码中？我只看到相对的 x 和 y 变量。这是我的代码：
抱歉，如果您无法处理此代码，那么您需要付费/说服某人完成您的工作。
有问题； panZoom({x: x, y: 0}) 不是函数。调整大小后，您的代码中未使用 var p = panZoom.getPan() 。应该是这样吗？
我确实更新了代码。 panZoom 在我的例子中是 svgPanZoom 实例。最后一行是错误的（但不难猜测它实际上应该是什么）。
调整大小后是否有任何理由运行此行：var p = instance.getPan()