1

画像を拡大できるが、「拡大鏡」インターフェイスを備えたタイルベースのズームスクリプトを探しています。

「拡大鏡」インターフェイスとは、ユーザーが画像の特定の部分をクリックして周辺領域を拡大できる Wadda のようなものを意味します。拡大された領域は、サムネイルに重なる円に含まれます。Wadda のデモはここで見ることができます: http://maxpert.github.com/wadda/

このソリューションは、何かが起こる前にスクリプトが高解像度画像全体をロードする必要があるという重要な事実を除いて、私の意図した使用法に最適です。私の高解像度画像は最大 5000x5000px 以上になる可能性があるため、これは私のプロジェクトには適していません。

高解像度画像全体をロードする代わりに、Leaflet のようなタイルベースのズーム ソリューション (leafletjs.com) の方がはるかに適しています。しかし、「拡大鏡」のズーム UX は、Wadda に似たものにしたいと思っています。

私の質問は次のとおりです。Wadda の UX と Leaflet のタイルベースのディープ ズームを組み合わせたスクリプト (またはスクリプトの修正) はありますか?

ユーザーは小さいサムネイルの一部をクリックして、円形のオーバーレイ内の拡大された領域を見ることができます。拡大された領域は、タイルベースの読み込みを使用して読み込まれます。

PS: タイトルが長くなってすみません。探しているものを短い文で説明するのは困難でした。

4

2 に答える 2

1

これが大いに役立つかどうかはわかりませんが、http：//openseadragon.github.com/（Leafletと同様のテクノロジー）がキャンバスを使用してレンダリングすることを追加したいと思いました（もちろん、キャンバスをサポートするブラウザーで） 、それはあなたがやろうとしていることともっと一致しているかもしれません。OpenSeadragonビューアを作成して、作成したキャンバスにクリッピング領域を使用できる可能性があります。もちろん、ズームとパンの状態を管理し、ユーザーのマウスに合わせて画面上で移動する必要があります。

さらに言えば、Leafletを含むdivに非常に大きな境界半径を設定することで、Leafletでも同じことができるかもしれません。

いずれにせよ、どちらのソリューションも少し開発が必要ですが、それは可能のようです。

私はOpenSeadragonプロジェクトに関わっていますので、もしあなたがそれを使うことになったなら、私はそれについて聞いてみたいです！

于 2013-03-11T17:57:41.097 に答える
1

いくつかの疑問を伴う高レベルの回答：

LeafletTileLayerクラスには、tileloadサブスクライブできるイベントがあります。Leaflet のタイルはimg要素であるため、このイベントtitleでは img 要素の属性をタイルの高解像度バージョンに設定できます。これは wadda が必要とするものです。

問題は、通常のタイル サーバーがすべて同じサイズのタイルを提供することです。ズームインすると、解像度の高いタイルが得られますが、面積は小さくなります。ワダが機能するには、同じ領域の高解像度タイルが必要だと思います。したがって、元のタイルが 256x256 ピクセルで、最大 2 倍にズームしたい場合、高解像度 URL は同じ領域の 512x512 ピクセルのタイルを提供する必要があります。

利点として、それを行うサーバー（またはおそらく2つのサーバー）を考えると、このように非常に実行可能であると思います..

于 2013-03-11T00:27:48.443 に答える