質問:
ズームが適用されていないときはパンができないように、SVG のパンをバインドしたいのですが、ズームインすると、SVG の境界内でパンできます。
視覚的な例:下の画像では、中央のズームされたビューポートは SVG の端までパンできますが、それ以上パンできません。
ただし、これは与えられたパンの例とは大きく異なり、そのように動作するように変更する方法はわかりません。これをどのように行いますか?(これを行うための簡単な組み込みの方法もありません)?
これを解決しようとして遭遇した問題
- 各制限は、正しい方向に許容されるピクセル単位の動きを設定します。つまり、bottomLimit = 200 では 200 ピクセル上に移動できます。したがって、デフォルトのズームでは、すべての制限を 0 に設定する必要がありますが、ブラウザ ウィンドウのサイズによって realZoom が変化するため、デフォルトのズームを認識する方法がわかりません。
- 視覚的な例では、bottomLimit を設定して SVG を正しくバインドする場合、x と等しくする必要がありますが、x の計算方法がわかりません。(topLimit は y などに等しくする必要があります。)