javascript - JavaScript 画像のズームとパン (ドラッグ)

Question

大きな画像のズームとパンに関する推奨事項はありますか? 理想的には、ページ上でインライン化します。

私は PanoJS (別名 GSV2) を使用していますが、現在は iPhone/iPad/Android タイプのデバイスを使用する人が増えています。このライブラリは遅すぎるか、古いバージョンではドラッグがサポートされていません (現在使用しているもの) ）。

http://code.google.com/p/panojs/

http://www.dimin.net/software/panojs/

私の現在の考えでは、タイル画像アプローチを使用することは、これらの小さなプロセッサには多すぎるということです (最大ズームでは、各タイルが 250x250 ピクセルの 3000 x 3000 ピクセルの元の画像から 144 個の個々の画像をドラッグしようとします)。

したがって、おそらく元の画像を幅/高さを設定してロードすることを検討し、独自のJSを作成してズーム/ドラッグするか、別のライブラリを使用します(現時点では見つけられないようです).. . 次に、jQuery を使用する (ドラッグ可能なサポートのために jQuery UI を使用する) か、生の JS を自分で作成してコードの量を抑えるかという問題があります。

Answer 1

さらに、標準ライブラリが必要なほどうまく機能していないように見えるため、自分の質問に答えて、独自のソリューションを作成することになりました。

https://github.com/craigfrancis/zoomify

意図は、このコードをコピーして、独自の要件に合わせてカスタマイズできるようにすることです...そのため、理想的には、コードをプロジェクトにドロップして最善を尽くすのではなく、コードを読んで理解できるようにする必要があります。

Answer 2

画面幅のモバイル デバイス用のビューポートを作成することをお勧めします。

複数のタイルのビューポートの外側にあるすべての画像を表示: なしに設定します。次に、ユーザーがパンすると、表示プロパティが更新されます。

そうすれば、ブラウザは主にいくつかの画像で動く大きな要素を計算し、次にいくつかの画像のオンとオフの状態を計算します。

グラフィックスの重い div 要素を再計算するよりも、グラフィックスの負荷がはるかに少なくなります。

Answer 3

After looking around for this too, I decided to use OpenSeadragon (New BSD licence), an open-source, web-based viewer for high-resolution zoomable images (desktop and mobile). I needed it for the Image Pyramid sources with Multi-Image support and filtering capabilities (via one of a multitude of plugins)

Another strong contender was OpenLayers (2-Clause BSD). Here's a simple example with a static image, and here's the complete list of examples.