0

ドラッグ可能でズーム可能な世界地図を作成する必要があり、クローズド システムを使用しているため、Google マップなどに頼ることはできません。

これは、ズームすると詳細が表示される完全な「マップ」アプリケーションではありませんが、基本的には、緯度/経度のさまざまなピンで世界を表示し、ズームすると、現在中央にあるマップの領域をズームしますステージで。

Kinetic.Path メソッドを使用してマップを作成することができました。また、その Path 要素の倍率を設定するスライダーを作成することもできました。また、その要素のドラッグ可能な状態を true に設定しました。

ただし、スケーリングするときは、常にパスの左上にスケーリングするため、基本的に座標 (0,0) になります。setOffset() を使用して、パスのオフセットをパスの中心 (幅 .5、高さ .5) に移動しました。これにより、イメージの 3/4 がステージの外に出てしまうという副作用があったため、パスの XY を幅の 0.5、高さの 0.5 に調整し、再び中央に配置しました。

これで、パスがステージの中央に配置され、ズームするとパスの中心にズームします。美しい。ただし、ドラッグしてから再度ズームすると、パスの中心に基づいてズームし続けます。ズームポイント (setOffset() で制御されていると想定) がステージの中心に対して中心に留まるようにする必要があります。そうすれば、パスをドラッグしてズームし続けると、表示されているものの中心にズームされます。

ドラッグ後にオフセットを調整するために、さまざまな計算 (これは私の得意分野ではありません) を試しましたが、正しく機能しないようです。誰かが私にパターンを説明できますか?

4

1 に答える 1

0

私は非常に似たようなことをしており、少し調べた後、既存のライブラリ呼び出しkineticjs-viewportを適応させることにしました(Google が &$*# 検索アルゴリズムを変更したため、デモ ページが見つかりませんが、リポジトリ)。基本的に、スケーリング、パン、ズームを処理します。私が見つけた2つの問題があります。

1) ズームすると、画面の中央ではなく左上隅のポイントがズームインされます。

2) kinetic-js の最新バージョンと互換性がないため、最新バージョンの kinetic を使用する場合は、コードを少し変更する必要があります。ただし、kinetic-js のバージョン v3.8.1 では問題なく動作します。また、互換性を持たせるのは難しいことではないので、使用することに決めて手を貸す必要がある場合は、私に連絡してください。

于 2012-08-17T10:13:34.853 に答える