2017-08-25 8 views
0

SVG要素(円など)をズーム(スケール)機能から除外し、パンニングを保持することは可能でしょうか?たとえば、マップiでは、赤い塗りつぶされた円で現在の位置を指します。ユーザーがズームするとき、私はこの円が一定の半径を持ってほしい。ユーザーパン - 私は他のすべてのビューポートの内容で円をパンしたいとき。 私は、このソリューションが見つかりました:SVG要素のみをズームから、またはパン機能からのみ除外します

Scale independent elements

をしかし、私がSVG-パン・ズームライブラリとそれを正しく使用する方法を見つけ出すことができないようです。

また、似たようなタスクがあると思います。ドラッグ&ドロップが可能ですか?パン機能から除外する要素だけを意味しますか?私はjQueryのようなドラッグ可能なアプローチを試していましたが、運がありません。

は、私が回避策のいくつかの種類をした数週間後にさてあなた

答えて

0

ありがとうございます。私は現在の位置を表す小さな円を持っている私の場合は

onZoom=function(currZoom){ 
    document.getElementById("marker").setAttribute("r", 2/currZoom); 
} 

:私はariutta/SVG-パン・ズームライブラリのイベントハンドラをonZoom使用して、このような単純な関数を書きます。さて、ユーザーズーム、ライブラリが現在のズームレベルを引数として渡すと、彼を半径に分割してオフにします。

また私は私の他の質問を達成する方法を見つけました。目的の要素の対応するマウスイベントでenablePan/disablePanを使用すると、ドラッグアンドドロップが可能です。現在のズームレベルに一致する正確なdX/dYを計算する方法を明確にすることはできないので、今はコードサンプルを投稿できませんが、それは間違いなく機能します。

関連する問題