このセクションでは、非常に単純な Deep Zoom アプリケーションの作成方法について説明します。その手順は次のとおりです。
1. イメージ ピラミッドを作成します。
2. MultiScaleImage、MultiScaleSubImage などの Deep Zoom オブジェクトをアプリケーションに追加します。
3. イベントをフックして、対話機能 (ズームおよびパン) を Deep Zoom オブジェクトに追加します。
イメージ ピラミッドの作成
上記のように、イメージ ピラミッドを作成するには、Deep Zoom Composer などのツールを使用することをお勧めします。このツールを使用すると、パノラマに配置された単一のイメージまたは複数のイメージからイメージ ピラミッドを作成できます。
Deep Zoom オブジェクトの追加
Deep Zoom ピラミッド (単に Deep Zoom イメージとも呼ばれます) を作成すると、これを読み込むための MultiScaleImage などの Deep Zoom オブジェクトが必要になります。次の例のように、MultiScaleImage は XAML で作成できます。
<MultiScaleImage x:Name="deepZoomObject" Source="source/items.dzi" />
次の例のように、MultiScaleImage を手続き的コードで作成することもできます。
MultiScaleImage myDeepZoomObject = new MultiScaleImage();
myDeepZoomObject.Source = new Uri("source/items.dzi");
Source プロパティでは、最初の手順で作成した Deep Zoom イメージが参照される点に注意してください。この時点で Web ページが開くと、イメージは、粗い解像度から鮮明な解像度に画質が変化しながら画面全体に表示されます。
イベントのフック
この時点ではまだ、ユーザーはイメージを操作できません。操作を有効にするには、イベントを MultiScaleImage にフックし、手順コードを使用して、ズームおよびパン機能を使用できるようにします。
この単純な例では、MouseEnter イベントは、マウス ポインタをイメージ上に移動したときに、そこを中心に拡大するために使用されます。
<MultiScaleImage x:Name="deepZoomObject" Source="source/items.bin"
MouseEnter="DeepZoomObject_MouseEnter" />
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 を指定すると、イメージは完全にビューの外側にパンされます。
ある時点でユーザーが表示するイメージの領域は、ビューポート領域と呼ばれます。ビューポート領域の概念を次の図に示します。
.png)
以下は、単純な "マウス オーバー/マウス オフ" ズームの完全なコードです。このコードには MouseLeave イベントが含まれているため、マウス ポインタがイメージから離れると、そのイメージは元の視点に再びズーム アウトおよびパンされます。
<MultiScaleImage x:Name="deepZoomObject" Source="source/items.bin"
MouseEnter="DeepZoomObject_MouseEnter"
MouseLeave="DeepZoomObject_MouseLeave"/>
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);
}
このサンプルを実行する