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 に答える