3

質問:

ズームが適用されていないときはパンができないように、SVG のパンをバインドしたいのですが、ズームインすると、SVG の境界内でパンできます。

視覚的な例:下の画像では、中央のズームされたビューポートは SVG の端までパンできますが、それ以上パンできません。

ここに画像の説明を入力

ただし、これは与えられたパンの例とは大きく異なり、そのように動作するように変更する方法はわかりません。これをどのように行いますか?(これを行うための簡単な組み込みの方法もありません)?

これを解決しようとして遭遇した問題

  1. 各制限は、正しい方向に許容されるピクセル単位の動きを設定します。つまり、bottomLimit = 200 では 200 ピクセル上に移動できます。したがって、デフォルトのズームでは、すべての制限を 0 に設定する必要がありますが、ブラウザ ウィンドウのサイズによって realZoom が変化するため、デフォルトのズームを認識する方法がわかりません。
  2. 視覚的な例では、bottomLimit を設定して SVG を正しくバインドする場合、x と等しくする必要がありますが、x の計算方法がわかりません。(topLimit は y などに等しくする必要があります。)
4

1 に答える 1

3

https://jsfiddle.net/930j458h/3/の例に基づく:

  1. の値を確認してくださいpanZoom.getSizes()
  2. これgetSizes().widthは SVG ブロック全体の幅でありgetSizes().viewBox.width、viewBox のサイズです。viewBox に興味があります。
  3. と置き換えるgetSizes().widthgetSizes().viewBox.width、すべてが魔法のように機能します

https://jsfiddle.net/930j458h/4/

于 2016-06-30T13:48:49.370 に答える