混合使用Deep Zoom（Seadragon）Silverlight 2 MultiScaleImages

One of the cool things seen at Mix 08 today was the Deep Zoom technology. This was originally called Seadragon and came out of the Live Labs research.

今天在Mix 08上看到的很酷的事情之一是Deep Zoom技术。 这最初称为Seadragon ，来自Live Labs的研究。

You can see it live at the Hard Rock Cafe Memorabilia site. This Silverlight application includes a tiled montage of 512 many-megapixel images, some 10+megapixels, while some are stitched together to sizes upwards of 40-50 megapixels, it seems.

您可以在Hard Rock Cafe大事记网站上实时查看它。 Silverlight的这个应用程序包括512个百万像素图像的平铺蒙太奇图像，其中一些超过10兆像素，而有些则被拼接在一起，尺寸超过40-50兆像素。

Remember the first 3D games like Sega's OutRun? They seemed 3D, but basically bitmaps were being scaled as you "drove forward" and each graphical asset, like a house, for example, would have a number of pre-rendered versions. Another example are .ico files that have 16x16, 32x32, etc, versions. As the viewer there is one image, but there's multiple resolutions depending on how far in you want to zoom. This is the basic idea behind "multi-scale images."

还记得世嘉出品的首批3D游戏吗？ 它们似乎是3D的，但是随着您“向前行驶”，基本上是在缩放位图，并且每个图形资产(例如房屋)都将具有许多预渲染的版本。 另一个示例是具有16x16、32x32等版本的.ico文件。 作为查看器，有一张图像，但是有多种分辨率，具体取决于要缩放的范围。 这是“多尺度图像”背后的基本思想。

You can see examples of exceedingly large images, often called "giga-pixel" images all over the web. A great example of zooming using Flash is at Harlem 13-Gigapixels.com. The large Harlem image is 2,045 individual images of 12 megapixels each. The rendering when zooming in is a lot like Google Earth. You zoom into an image of a specific resolution then that first image transitions into a tile of a second image rendered another resolution. You can create these kinds of images with Panorama stitching software like AutoPano.net, and PanoramaFactory. I took a large 50+ megapixel panorama of Ngorongoro Crater in Tanzania that I think would make a good example for this kind of thing. I'll dig it up and make a Deep Zoom example project.

您可以在网络上看到超大图像的示例，通常称为“千兆像素”图像。 Harlem 13-Gigapixels.com是使用Flash缩放的一个很好的例子。 哈林大图像是2,045个单独的图像，每个图像12兆像素。 放大时的渲染与Google Earth很像。 放大特定分辨率的图像，然后将第一个图像转换为呈现另一种分辨率的第二个图像的图块。 您可以使用诸如AutoPano.net和PanoramaFactory的Panorama拼接软件来创建此类图像。 我在坦桑尼亚的恩戈罗恩戈罗火山口拍摄了超过50万像素的大型全景图，我认为这将是此类事情的一个很好的例子。 我将对其进行挖掘，并制作一个Deep Zoom示例项目。

DeepZoom includes an optimized local Silverlight Renderer and XAML control that makes creating these fairly easy. Try it out over at the HardRock Memorabilia site and take specific notice of this guitar I've circled in the picture below.

DeepZoom包含优化的本地Silverlight渲染器和XAML控件，使创建这些控件相当容易。 在HardRock大事记网站上尝试一下，并特别注意我在下图中圈出的这把吉他。

Zoom in...

放大...

And more...into the screw knob in the lower left corner...

还有更多...进入左下角的螺丝旋钮...

You can actually see a reflection of the bench and the camera and Scott Stanfield from Vertigo who's taking the shot of this guitar, reflected in the shiny knob. Vertigo wrote the Hardrock site and they also have a great Deep Zoom Gallery.

实际上，您可以看到长凳和照相机的反射，还有Vertigo的Scott Stanfield(正在拍摄这把吉他的镜头)，反射在闪亮的旋钮中。 Vertigo撰写了Hardrock网站，他们还有一个很棒的Deep Zoom Gallery 。

You can go download the Preview of the Deep Zoom Composer now. You can see its heritage when you make a new Project and it puts it in a folder called "Seadragon Projects." Here's the Deep Zoom Composer User Guide.

您可以立即下载Deep Zoom Composer的预览。 创建新项目并将其放在名为“ Seadragon Projects”的文件夹中时，您可以看到其遗产。 这是Deep Zoom Composer用户指南。

You place a number of pictures (or a large one) on the surface and export the collection. There will be a scene graph XML file created indicating location, size, z-order and aspect ratio of the images.

您在表面上放置了许多图片(或大图片)并导出了图片集。 将创建一个场景图XML文件，指示图像的位置，大小，z顺序和纵横比。

Then an output directory will be created with folders for each image and, depending on the relative largeness of the source images, a series of tiles generated a number of zoom levels. Here's an example directory structure:

然后，将为每个图像创建一个带有文件夹的输出目录，并且根据源图像的相对大程度，一系列图块会生成许多缩放级别。 这是示例目录结构：

See how that image at zoom level 11 has 20 different tiles? They've got to balance many factors to make it all seamless. They're considering how many tiles are needed for that resolution as it relates to a zoom level's need for memory, as well as considering a reasonable number of requests to the server. There's the extreme need for a good user-experience so you want the images to come fast and furious, be easily cached and quickly shown to give the perception of speed. You don't have to sweat any of this stuff, as the multi-resolution tiles stitched together automatically by the client rendered.

看看缩放级别11的图像如何具有20个不同的图块？ 他们必须权衡许多因素，以确保一切均无缝。 他们正在考虑该分辨率需要多少个图块，因为它与缩放级别的内存需求有关，并且正在考虑对服务器的合理数量的请求。 迫切需要良好的用户体验，因此您希望图像变得快速而疯狂，易于缓存并快速显示以提供速度感。 您不必费心任何事情，因为由客户端自动将多分辨率的拼贴拼接在一起。

After you've exported a project into these files, you create a MultiScale image in XAML like this, referencing a bin file manifest that knows contains info about the directory structure and files:

将项目导出到这些文件中之后，您可以像这样在XAML中创建一个MultiScale图像，引用一个bin文件清单，该清单知道包含有关目录结构和文件的信息：

<MultiScaleImage x:Name="deepZoomObject" Source="foo/info.bin"/>

<MultiScaleImage x：Name =“ deepZoomObject” Source =“ foo / info.bin” />

This gets you the image rendered. To zoom a MultiScaleImage, you call ZoomAboutLogicalPoint:

这样可以使您渲染图像。 要缩放MultiScaleImage，请调用ZoomAboutLogicalPoint：

public void ZoomAboutLogicalPoint(double zoomIncrementFactor, double zoomCenterLogicalX, double zoomCenterLogicalY)

public void ZoomAboutLogicalPoint(double zoomIncrementFactor，double zoomCenterLogicalX，double zoomCenterLogicalY)

But there's a decent amount of state management that needs to be done as well as deciding how you want things animated, whether or not your image contains sub-images, etc. In the morning I'll take a look at how to hook up JavaScript events like Mouse Wheel Scrolls and do some zooming and panning. Hopefully Vertigo will release their hard-won source code for the canonical example to the community. It's pretty slick.

但是，需要做大量的状态管理，以及决定如何使事物动画化，图像是否包含子图像等。早上，我将看一下如何连接JavaScript。鼠标滚轮滚动等事件，并进行一些缩放和平移。 希望Vertigo能够将他们来之不易的源代码作为规范示例发布给社区。 非常漂亮。

翻译自: https://www.hanselman.com/blog/deep-zoom-seadragon-silverlight-2-multiscaleimages-at-mix