2

ariutta svg-pan-zoom ライブラリ ( https://github.com/ariutta/svg-pan-zoom ) を使用しています。

ユーザーがボタンをクリックすると、(x:1000, y:20) の特定の形状にパンしようとしています。また、この時点で画像を中央に配置したいと思います。

私が直面している問題は、パンしようとしているポイントと中央が画面から外れることです。

私は現在使用しています：

panZoom.pan({x:1000, y:20});

しかし、これは機能しません。

詳細については、jsFiddle を参照してください: http://jsfiddle.net/arjSharma/n6r55dp1/2/

誰でも私の問題を解決できますか?

ありがとう

4

1 に答える 1

13

私は自分の質問に答えることができました:私は最初にメソッドを使用してポイント 0,0 にパンします:

panZoom.pan({x:0,y:0});

次に、次の方法で「実際のズーム」値を取得します。

var realZoom= panZoom.getSizes().realZoom;

特定の x と y でパンして中央に配置するには、以下の例のように、pan() メソッドを使用して x と y 座標を渡します。

panZoom.pan
({  
x: -(755*realZoom)+(panZoom.getSizes().width/2),
y: -(240*realZoom)+(panZoom.getSizes().height/2)
});

'+(panZoom.getSizes().width/2)' および '+(panZoom.getSizes().height/2)' は、画像が確実に中央に配置されるように x 座標と y 座標にオフセットを追加する役割を果たします。

私の回答に関してさらに質問があればお気軽にどうぞ。

于 2015-04-13T14:01:06.343 に答える