Deep Zoom を使用すると、Silverlight で高解像度のイメージをインタラクティブに表示できます。アプリケーションのパフォーマンスを損なうことなく、イメージの拡大と縮小を滑らかに実行できます。このクイックスタートでは、Deep Zoom イメージの作成、読み込み、およびインタラクティビティを追加する方法について説明します。
このクイックスタートは、次のセクションで構成されています。
Deep Zoom の詳細については、MSDN の Silverlight ドキュメントの「Deep Zoom」を参照してください。
Deep Zoom の例
次の例は、Deep Zoom の実際の使用例です。このサンプルを実行するには、プラス (+) ボタン/マイナス (–) ボタンをクリックしてイメージを拡大/縮小します。マウス ホイールを使用すると、拡大/縮小の両方を実行できます。表示をリセットするには、一番上にある四角のボタンをクリックします。イメージの位置を変更するには、マウスでドラッグします。
Deep Zoom イメージの作成
Deep Zoom アプリケーションを開発するには、まず Deep Zoom イメージを作成する必要があります。Deep Zoom イメージはイメージ ピラミッドとも呼ばれます。Deep Zoom イメージは、さまざまな解像度の JPEG イメージまたは PNG イメージのタイルで構成されます。タイルのサイズは通常 256 x 256 ですが、変更が可能です。タイルはそれぞれ個別のファイルに格納され、ピラミッドの各レベルは個別のフォルダーに格納されます。このため、イメージ全体をダウンロードせずに、画面上の現在のイメージのサイズに必要なタイルのみをフェッチできます。たとえば、イメージにズームインして、強調表示された中央の領域だけを表示すると、Deep Zoom は 1024 x 1024 のイメージ全体ではなく、強調表示されたタイルのみを読み込みます。次の図は、Deep Zoom イメージの処理の仕組みを示しています。
このような Deep Zoom イメージを手動で作成するのはたいへんなので、Deep Zoom Composer などのツールを使用します。Deep Zoom イメージへのアクセスに使用するファイル形式は、XML スキーマをベースとしています。Deep Zoom ファイル形式で使用する XML スキーマの詳細については、MSDN の Silverlight ドキュメントの「Deep Zoom ファイル形式の概要」を参照してください。
Deep Zoom イメージの読み込み
Deep Zoom は、複数の解像度のイメージとスプリング アニメーションの使用によって、滑らかな読み込みとパンを実現します。Deep Zoom イメージを読み込むには、MultiScaleImage などの Deep Zoom オブジェクトを使用します。次の XAML は、deepZoomObject という名前の MultiScaleImage を作成する方法を示します。Source プロパティは Deep Zoom イメージを指します。
XAML
<MultiScaleImage x:Name="deepZoomObject" Source="source/items.xml" />
次のサンプルは、イメージを読み込む方法を示します。このサンプルを実行するには、[再読み込み] をクリックしてください。クリックすると、イメージの表示がぼやけた状態から次第に鮮明になります。
Deep Zoom イメージへのインタラクティビティの追加
Deep Zoom イメージを読み込んだだけでは、まだインタラクティブに操作できません。インタラクティビティを実装するには MultiScaleImage にイベントを追加し、コードを使用してズームとパンの機能を追加する必要があります。
次の例は、MouseEnter イベントを使用して、マウス ポインタがイメージの上に置かれたときにイメージの中央を拡大する方法を示します。このコードには MouseLeave イベントも記述されているため、マウス ポインタがイメージから離れると、イメージはズームとパンによって元の状態に戻ります。マウス ポインタをイメージの上からイメージの外に移動してみてください。
XAML
<MultiScaleImage x:Name="deepZoomObject" Source="source/items.bin" MouseEnter="DeepZoomObject_MouseEnter" MouseLeave="DeepZoomObject_MouseLeave" />
C#
private void DeepZoomObject_MouseEnter(object sender, MouseEventArgs e) { // If animation springs were turned off, then // turn them back on if (deepZoomObject.UseSprings == false) { deepZoomObject.UseSprings = true; }
// 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); }
private void DeepZoomObject_MouseLeave(object sender, MouseEventArgs e) { double zoom = 1; zoom = zoom / 3; // This time the zoom is reversed (1/3) although the pan // remains the same - zoom back out from the middle. this.deepZoomObject.ZoomAboutLogicalPoint(zoom, .5, .5); }
Visual Basic
Private Sub DeepZoomObject_MouseEnter(sender As Object, e As MouseEventArgs) ' If animation springs were turned off, then ' turn them back on If deepZoomObject.UseSprings = False Then deepZoomObject.UseSprings = True End If
' 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 Sub DeepZoomObject_MouseLeave(sender As Object, e As MouseEventArgs) Dim zoom As Double = 1 zoom = zoom / 3 ' This time the zoom is reversed (1/3) although the pan ' remains the same - zoom back out from the middle. Me.deepZoomObject.ZoomAboutLogicalPoint(zoom, 0.5, 0.5) End Sub
この例では、ZoomAboutLogicalPoint メソッドを使用してズームとパンを実行しています。最初のパラメーターは拡大率です。イメージの現在のズーム倍率からインクリメントした値を指定します。ZoomAboutLogicalPoint メソッドの 2 番目と 3 番目のパラメーターは、それぞれズーム (パン) 時の論理点の x 座標および y 座標です。論理点は、イメージ内の x 位置および y 位置について正規化した値 (0 ～ 1) を使用します。したがって、値 0.5, 0.5 はイメージの中央を表します。
参照
フィードバックを送信する