次のサンプルでは、Deep Zoom の実際の動作を確認できます。イメージを拡大表示するには、正符号 (+) ボタンをクリックするか、マウス ホイールを使用します。縮小表示するには、負符号 (–) ボタンをクリックするか、マウス ホイールを使用します。表示をリセットするには、1 つ目の四角形のボタンをクリックします。イメージの位置を変更するには、イメージをマウスでドラッグします。

このサンプルを実行する

このサンプルをダウンロードする

Deep Zoom を使用する Web サイトの例については、Deep Zoom の使用例を参照してください。マウス ホイールを使用して拡大/縮小できます。イメージの位置を変更するには、イメージをマウスでドラッグします。

Deep Zoom は、さまざまな分野で利用できますが、その中でも、Deep Zoom を特に活かすことのできる 3 つのシナリオがあります。

• 非常に大きなイメージまたは高解像度のイメージの操作: この機能を使用する典型的な例として、大きな地図の一部を拡大してさまざまなレベルの詳細を表示し、マウスを使用して地図上でビューを移動することが挙げられます。ユーザーがビューを移動すると、アニメーションの使用により、イメージ上のある場所から別の場所に自分が移動しているように見えます。別の例としては、高解像度の写真で構成されたプロ仕様の写真構成があります。

• 3-D 写真: 連続して部屋の写真を撮影し、部屋の 360°の写真で構成される写真のコレクションを作成します。これにより、ユーザーは、各写真が他の写真とブレンドした状態で部屋をパンできます。

• 広告: 比較的低解像度のイメージを作成して、広告の全体的なテーマを表現してから、製品に関するより多くの広告とデータを含む高解像度のイメージを段階的に表示できます。広告が埋め込まれたページが最初に読み込まれるときに、広告は滑らかに鮮明になり、続いて高解像度のイメージを読み込んでユーザーの注意を引きつけます。広告は徐々に読み込まれるため、ユーザーがそのサイトに対して抱く総合的な使用感にはさほど影響しません。また、マウスが広告内に移動すると、広告のさまざまな部分が拡大表示されます。

Deep Zoom では、複数解像度のイメージを使用して、非常に大きなイメージであっても、高いフレームレートのまま高速で開くことができます。イメージを読み込むとき、画面上に何らかの情報をとりあえず表示するだけであれば、さほど大量のデータは要りません。最初は低解像度バージョンのイメージを読み込み、高解像度バージョンが使用できるようになった段階で、高解像度バージョンにブレンドします。Deep Zoom で、粗いイメージから鮮明なイメージへと画質が上がったように見えるのは、このためです。また、イメージのサイズに関係なく、イメージ データを読み込むための待ち時間をそれほどかけずに、イメージがすぐに開くように見せることができます。最初の読み込み以外にも、ユーザーがアプリケーションを操作するときに (ズーム、パンなど)、これと同じ動作が得られます。

Deep Zoom には、スプリングのアニメーションが使用されており、それがイメージの滑らかな "動き" (パンまたはズーム) をユーザーに印象付けます。これらのスプリングは、初期状態から最終状態までアニメーション化され、時間を基準としたグラデーションは、1 に向かって指数関数的に減衰します。スプリングの終了値は、ユーザーによるズームおよびパン操作に対応してすぐに更新されます。開発者によって表示ビューポートが変更されると、スプリングを使用して滑らかさと視覚的な連続性を確認し、コンテンツを新しいビューポートに適合させる遷移が発生します。

Deep Zoom を使ったアプリケーションを作成するには、あらかじめ Deep Zoom イメージを作成しておく必要があります。Deep Zoom イメージは、JPEG (または PNG) イメージをタイル状に並べて 1 枚の画像を形成し、それをピラミッド状に積み重ねながら、下の層にいくほど解像度が高くなるようにしたものです。タイルのサイズは通常 256x256 ですが、このサイズは変更することができます。各タイルは個別のファイルに保存され、ピラミッドの各レベルが個別のフォルダーに保存されます。このため、Deep Zoom では、イメージ全体をダウンロードせずに、画面上でイメージの現在のサイズに必要なタイルのみをフェッチできます。たとえば、イメージのハイライトされた中央の領域にズームインすると、Deep Zoom は 1024 × 1024 のイメージ全体ではなく、ハイライトされた部分のタイルのみを読み込みます。

メモ :
Deep Zoom イメージは、BitmapImage クラスによってサポートされているイメージ ファイルのみをサポートします。

次の図に、Deep Zoom イメージの実際の動作を示します。イメージそのものは、ピラミッドの最下位で最大解像度で使用でき、4 × 4 ピクセルの低解像度バージョンが最大解像度のイメージと共に保存されます。ピラミッドの各レベルのイメージは、256 × 256 ピクセルのタイルで保存されます (イメージでは白色のラインで示されます)。

このようなピラミッドを手動で作成するのはたいへんなので、ツールを使用して、イメージをイメージ ピラミッドに変換することをお勧めします。Deep Zoom イメージを作成する最善の方法は、Deep Zoom Composer などのツールを使用することです。このツールを使用すると、パノラマに配置された単一のイメージまたは複数のイメージからイメージ ピラミッドを作成できます。イメージ ピラミッドにアクセスするために使用するファイル形式では、XML スキーマが使用されます。Deep Zoom Composer を使用してもこのファイル形式を生成できますが、手動で XML を作成するか、生成済みのファイルを手動で変更して、ファイル形式をより正確に管理することをお勧めします。Deep Zoom ファイル形式で使用される XML スキーマの詳細については、「Deep Zoom ファイル形式の概要」を参照してください。

メモ :
Photosynth は、Deep Zoom Composer と同じ形式を使用したツールであり、Deep Zoom アプリケーションにも適しています。Photosynth は、3D の 360° モデルを制作するためのツールとして設計されました。たとえば、旅行先で訪れた建物を一連のデジタル写真として撮影し、そのイメージを Photosynth に読み込みます。Photosynth が各写真の類似点を解析して、それを基に撮影場所のモデルを構築します (それぞれの写真がつなぎ合わされます)。

Deep Zoom イメージを作成したら、それを読み込むための MultiScaleImage などの Deep Zoom オブジェクトが必要になります。MultiScaleImage を XAML で作成する方法を次に示します。

<MultiScaleImage x:Name="deepZoomObject" Source="source/items.dzi" />

MultiScaleImage をコードから作成する方法を次に示します。

Dim myDeepZoomObject As MultiScaleImage = New MultiScaleImage
myDeepZoomObject.Source = New Uri("source/items.dzi")

MultiScaleImage myDeepZoomObject = new MultiScaleImage();
myDeepZoomObject.Source = new Uri("source/items.dzi");

Source プロパティでは、Deep Zoom イメージが参照される点に注意してください。Web ページが開くと、最初は粗かったイメージが、徐々に鮮明さを増していきます。

Deep Zoom イメージを読み込んだ時点では、まだ、ユーザーがイメージを操作することはできません。ユーザーがイメージを操作できるようにするには、MultiScaleImage イベントを処理することによって、コードとしてズームおよびパン機能を実装します。

次の例では、マウス ポインターをイメージ上に移動したときに、そこを中心にイメージを拡大するために、MouseEnter イベントを使用しています。

このサンプルを実行する

<MultiScaleImage x:Name="deepZoomObject" Source="source/dzc_output.xml" 
 MouseEnter="DeepZoomObject_MouseEnter" />

Private Sub DeepZoomObject_MouseEnter(ByVal sender As Object, ByVal e As MouseEventArgs)
    ' The ZoomAboutLogicalPoint method allows you to zoom and pan
    ' in the same step. The first parameter is the zoom (3x) and the
    ' third and fourth parameters are the respective x and y coordinates
    ' of the logical point to zoom around.
    Me.deepZoomObject.ZoomAboutLogicalPoint(3, 0.5, 0.5)
End Sub

private void DeepZoomObject_MouseEnter(object sender, MouseEventArgs e)
{

    // The ZoomAboutLogicalPoint method allows you to zoom and pan
    // in the same step. The first parameter is the zoom (3x) and the
    // third and fourth parameters are the respective x and y coordinates
    // of the logical point to zoom around.
    this.deepZoomObject.ZoomAboutLogicalPoint(3, .5, .5);
}

前の例では、ZoomAboutLogicalPoint メソッドによりズームおよびパンが実行されます。最初のパラメーターは、現在のイメージの倍率からインクリメントされる拡大率です。たとえば、この例では、既定のズームは 1 であり、値が 3 の場合は 3 倍に拡大されることを意味します。同じ値を使用して再度拡大する場合、3 * 3 の倍率で拡大されます。これは、最初のサイズの 9 倍になります。

ZoomAboutLogicalPoint メソッドの 2 番目と 3 番目のパラメーターはそれぞれ、ズーム (パン) 時の論理点の x 座標および y 座標です。論理点は、イメージ内の x 位置および y 位置について正規化した値 (0 ～ 1) を使用します。したがって、値 0.5, 0.5 はイメージの中央になります。これは、0.5 が 0 と 1 の中間の値であるためです。座標値に 0 以下または 1 以上を指定すると、イメージは完全にビューの外側にパンされます。

ある時点でユーザーが表示するイメージの領域は、ビューポート領域と呼ばれます。ビューポート領域の概念を次の図に示します。

個々の多重解像度イメージのセットを操作する場合、たとえば、プログラムによって個々の多重解像度イメージを画面内で移動したり、イメージをフィルター処理したりする場合、単一の高解像度イメージではなく、イメージのコレクションを使用します。イメージのコレクションを使用するには、基本的に次の 2 つを実行する必要があります。

1. 単一のイメージではなくコレクションとしてイメージをエクスポートします。

   これを実行するには、Deep Zoom Composer を使用します。コンポジションのエクスポート時に、[コレクション (複数のイメージ) としてエクスポートする] をオンにしてください。エクスポートするコレクション内のイメージはサブイメージと呼ばれ、それぞれ独自のイメージ ピラミッドを持ちます。

2. SubImages プロパティを使用して、MultiScaleImage 内のサブイメージ (個々の MultiScaleSubImage オブジェクト) にアクセスします。

   MultiScaleSubImage 内のサブイメージの一覧を取得する方法を次の例に示します。

   Visual Basic

   Private Function RandomizedListOfImages() As List
     Dim imageList As List = New List
     Dim ranNum As Random = New Random
     ' Store List of sub images.
     For Each subImage As MultiScaleSubImage In myMultiScaleImage.SubImages
       imageList.Add(subImage)
     Next
     Return imageList
   End Function

   C#

   private List<MultiScaleSubImage> RandomizedListOfImages()
   {
     List<MultiScaleSubImage> imageList = new List<MultiScaleSubImage>();
     Random ranNum = new Random();
   
     // Store List of sub images.
     foreach (MultiScaleSubImage subImage in myMultiScaleImage.SubImages)
     {
       imageList.Add(subImage);
     }
   
     return imageList;
   }

次のサンプルでは、コレクション内のすべての MultiScaleSubImage オブジェクトを操作してイメージをグリッド パターンに再配置する例を紹介しています。効果を確認するには、イメージをランダム化するボタンをクリックします。

このサンプルを実行する

このサンプルをダウンロードする

その他の技術情報