svg-pan-zoom-以不同的浏览器大小平移和缩放到同一位置 [英] svg-pan-zoom -- Pan and zoom to same location in different browser sizes

问题描述

我正在使用ariutta svg-pan-zoom库( https://github.com/ariutta/svg-pan-zoom ). (还与jquery.layout.js窗格和jquery-ui.js一起使用)

I am using the ariutta svg-pan-zoom library(https://github.com/ariutta/svg-pan-zoom). (Also using with jquery.layout.js panes and jquery-ui.js)

我想保存诸如svg-pan-zoom svg的pan和zoom值之类的值，并使用这些值在具有不同大小窗口的浏览器中跳转到相同位置.

I would like to save the values such as pan and zoom values of an svg-pan-zoom svg and use those values in to jump to the same location using a browser with a different sized window.

当前，我正在使用getPan()和getZoom()保存值；然后在其他浏览器中缩放(缩放)和平移(平移)以缩放和平移到同一位置.当浏览器窗口大小不同时，这将不起作用.

Currently I am using getPan() and getZoom() to save the values; then zoom(zoom) and pan(pan) in the other browser to zoom and pan to the same location. That does not work when the browser window size is different.

我找到了这篇文章，但它没有解决其他尺寸的窗口:
平移到特定的X和Y坐标和中心图像svg-pan-zoom

I found this article, but it does not address a window that is a different size:
Pan to specific X and Y coordinates and center image svg-pan-zoom

推荐答案

平移和缩放与当前容器的大小有关.因此，您想要的是计算可见SVG零件的中心点.然后在新窗口中计算应该具有该SVG点(在先前情况下为中心)的新平移. 至于缩放，取决于您要如何使它起作用，但是您可以使用真正的缩放.

Pan and zoom are relative to current container size. So what you want is to compute the center point of visible SVG's part. Then in new window compute what should be the new pan to have the that SVG's point (that was the center in previous case). As about the zoom it depends on how you want to make it work, but you could use the real zoom.

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

To get container sizes and real zoom use instance.getSizes().

例如，要计算x轴，请执行以下操作:

So for example to compute x axis 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-以不同的浏览器大小平移和缩放到同一位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！