問題タブ [svgpanzoom]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
svgpanzoom - SVG 内のいくつかの HTML (おそらく div) 要素を使用した Svgpanzooming
まず、svg-pan-zoom を開発し、維持するのを手伝ってくれた人に感謝します。本当に役に立ちました。大きな小道具:)
とにかく、svg-pan-zoom コミュニティに簡単な質問があります。内部に HTML div がある (foreignObject の内部にある) svg で svg-pan-zoom を使用することはまったく可能ですか?
この svg がパンおよびズームされているときに、この svg の動きを「たどる」には、HTML 要素 (具体的にはフォーム) が必要です。SVG 要素に対する相対的な位置は変更されるべきではなく、それらと共に移動する必要があります。
私はそれを完全に個別に実行しようとしましたが (HTML フォームのパンを制御する別のコード)、非常にギミックが多く、対処したくない技術的な問題に遭遇しました。(たとえば、div を移動しても、svg は一緒に移動しません。) svg-pan-zoom がforeignObjects をサポートしているかどうか、および HTML 要素を svg で移動するにはどうすればよいかを誰かが教えてくれれば、本当にありがたいです。
前もって感謝します。
svgpanzoom - svg-pan-zoom.js ライブラリに縦または横のみに収まる方法はありますか
これはドキュメントからは明らかではありませんが (ドキュメントを呼び出すことができる場合README.md;))、svg-pan-zoomライブラリはおそらく (のみ) 垂直/水平フィットをサポートしていますが、どのように? fitベスト フィットはメソッドを通じて既にサポートされており、正常に動作します。
呼び出されたメソッドcontainはおそらく使用するものですが、呼び出すと、ある場合と別の場合があります。
私はおそらくこれを自分で実行したり、この素敵な OSS に貢献したりできることを知っています。サポートが既に存在するかどうかを確認するだけです。
svgpanzoom - 元の SVG の境界内でのみパンを許可する方法
質問:
ズームが適用されていないときはパンができないように、SVG のパンをバインドしたいのですが、ズームインすると、SVG の境界内でパンできます。
視覚的な例:下の画像では、中央のズームされたビューポートは SVG の端までパンできますが、それ以上パンできません。
ただし、これは与えられたパンの例とは大きく異なり、そのように動作するように変更する方法はわかりません。これをどのように行いますか？（これを行うための簡単な組み込みの方法もありません）？
これを解決しようとして遭遇した問題
- 各制限は、正しい方向に許容されるピクセル単位の動きを設定します。つまり、bottomLimit = 200 では 200 ピクセル上に移動できます。したがって、デフォルトのズームでは、すべての制限を 0 に設定する必要がありますが、ブラウザ ウィンドウのサイズによって realZoom が変化するため、デフォルトのズームを認識する方法がわかりません。
- 視覚的な例では、bottomLimit を設定して SVG を正しくバインドする場合、x と等しくする必要がありますが、x の計算方法がわかりません。(topLimit は y などに等しくする必要があります。)
javascript - svg-pan-zoom が 100% の確率で機能しない
私は svg-pan-zoom ライブラリ ( https://github.com/ariutta/svg-pan-zoom ) を使用しており、私のサイトのページで約 75% の時間で動作します (最新の Chrome と Firefox の両方で)バージョン)。
これは私の側の設定ミスによるものだと想定しているので、エラーを起こしたのか、それともこれを引き起こしている可能性のある特定のシナリオがあるのか 疑問に思っていました.
私のコード:
エラー：
ライブラリのバージョン: 3.2.9
svg - panzoom を使用して SVG のスケーリングされた座標の特定のポイントをズームインできない
https://github.com/ariutta/svg-pan-zoomライブラリを使用しています
内部に要素「g」を持つsvgがあります。この要素には、viewBox = "2727 -2840 1630 1115" があります。
特定のポイント (ビューボックス内) を拡大したい
しかし、うまくいきません。svg がビューボックスの外に移動したようです。パンズームの初期値は x,y = 0,0 で、ビューボックスは 0 0 900 787 です。
r - R svgPanZoom サイズのカスタマイズとロケーターの追加
私は現在、すばらしいパッケージ svgPanZoom を使用して Shiny アプリに取り組んでおり、未解決のままの 2 つの質問があります。
(1)グラフのサイズを動的にカスタマイズすることは可能ですか。私はコードに従ってそれをやろうとしました( https://stackoverflow.com/questions/33522860/svgplot-error-in-shinyのように):
しかし、何も起こりませんでした:( アイデアはありますか?
(2)このコードに (PlotOutput のように) ロケーターを含めることができるかどうか知っていますか?
主なアイデアは、直交座標系で (細胞の) 画像をプロットし、その画像をクリックして細胞の核を見つけることです。画像上のセルが非常に小さいため、ユーザーがズームする必要がある場合があります (そのため、私は svgPanZoom を使用しています)。したがって、取得したい X と Y は、ユーザーがズームを使用しても、正規直交システム全体のものです。
svg-pan-zoom を使用してズーム後にカーソルの位置を確認しましたが、R からのものではないようです
アイデアをありがとうございました！
素敵な日曜日の夜を！
チャ