最近、XAMLのお勉強をしているのだが、そこで見つけた、DeepZoom。

ちょいと遊んでみた。

DeepZoomでは、高解像度で、巨大な画像をなめらかに拡大縮小するようなGUIを簡単に構築できる。.NET Frameworkでは、MultiScaneImageという名前のコントロールで、ぶっちゃけて言ってしまえばMipmapテクスチャの考え方を導入した画像表示コントロールである。

このコントロールを使うためには、イメージピラミッドと呼ばれる、様々な解像度の画像ファイルとそれらの情報を含んだXMLを事前に生成しておかなければならない。

イメージピラミッドを生成するツールに、Depp Zoom Composerがある。

Deep Zoom Composerはこちらからダウンロードできる。

さくっとインストールして起動すると、上のような画面が出るので、「New Project…」をクリックして新しいプロジェクトを作成する。

Expressionの下のDeep Zoom Composer Projectsの下にプロジェクトが作成される。あくまでも、Expressionの一部の機能だと言いたいらしい。

からのプロジェクトができあがると、上の画面になる。まずはじめにどの画像を使うのかの一覧を作成する。

この状態で、イメージをドラッグアンドドロップでぽいぽい、放り込んでいく。 

イメージを放り込むと、「Importing」と表示され、画像が取り込まれていく。

1枚画像を放り込んだところ。右に、画像のサムネイル。中央に選択されている画像が表示されている。

とりあえず、お試しなので1枚だけ。

上にある、「Compose」をクリックする。

画面が切り替わって、画像をどこに配置するのかというエディット画面になる。

ここで、右のサムネイルから中央の画面にドラッグアンドドロップして、画像を配置していく。

画像の上下関係は右の「Layers」タブで調整できる。

とりあえず、ど真ん中に1枚、ぺろんと。

画像の配置が終わったら、上から「Export」を選択すると、上の画面になる。このまま、PhotoZoomというMicrosoft Labが運営するサイトに結果を転送してもいいが、全部自前で遊んでみたい僕としては「Custom」タブを選択。

選択肢は3つ、「Images」「Silverlight Deep Zoom」「Seadragon Ajax」。

「Images」を選択すると、イメージピラミッドのみを生成する。

「Silverlight」を選択すると、イメージのピラミッドのみならず、そのイメージを表示するための、XAPが埋め込まれたHTMLを生成する。XAPを生成するためのコードは、csprojとともに生成され、あとで、Visual Studioや、Expression Blendで開く事ができる。

「Seadragon Ajax」を選択すると、同様にそのイメージを表示するためのHTMLが生成されるが、これはSilverlightを使用したものではなく、Java Scriptで実装したものらしい。スクリプトはhttp://seadragon.com から調達の模様。Silverlightが動かない環境でも、Deep Zoomを使った画像表示ができるというのが狙い。

名前を入力したら、右下の「Export」を押すと、ファイルが生成される。

ファイルの生成が終わると、上のようなダイアログが出てくる。Preview in Browserを押せば、IEが起動して、画像を見ることができる。

こんな感じ。