En el ejemplo siguiente se muestra Deep Zoom en acción. Para probar este ejemplo, para acercar la vista, haga clic en el botón más (+) o use la rueda del mouse. Para alejarla, haga clic en el botón menos (–) o use la rueda del mouse. Para restablecer la vista, haga clic en el primer botón cuadrado. Para cambiar de posición la imagen, arrástrela con el mouse.

Ejecutar este ejemplo

Descargar este ejemplo

Para conocer el funcionamiento de Deep Zoom en un sitio web, vea este ejemplo de Deep Zoom. Al zoom para acercar y alejar, use la rueda del mouse. Para cambiar de posición la imagen, arrástrela con el mouse.

Deep Zoom se puede usar en muchas áreas diferentes, pero hay tres escenarios clave para los que es especialmente útil.

• Exploración de imágenes muy grandes o de alta resolución: un ejemplo clásico sería la ampliación de determinadas partes de un mapa de gran tamaño para ver diferentes niveles de detalle y, a continuación, el uso del mouse para desplazarse por la vista de la superficie del mapa. Cuando el usuario se desplaza por la vista que se muestra en pantalla, se utilizan animaciones para dar la impresión al usuario de que está "moviéndose" de un lugar a otro de la imagen. Otro ejemplo sería la exploración de una composición fotográfica profesional formada por imágenes de alta resolución.

• Fotografía 3D: tome fotos de una habitación, una tras otra, para crear una colección de fotografías que formen una imagen de 360 grados de la habitación. Ahora, el usuario podrá recorrer la habitación gracias a esa combinación de fotografías.

• Anuncios: puede crearse una imagen de resolución relativamente baja para representar el tema global de un anuncio y, a continuación, crear imágenes de resolución cada vez más alta que contengan más impresiones y datos sobre el producto. Cuando se carga por primera vez la página en la que está incrustado el anuncio, este se va volviendo paulatinamente más nítido y capta la atención del usuario gracias a la carga sucesiva de imágenes de mayor resolución. Como el anuncio se carga progresivamente, no afecta significativamente a la experiencia general del usuario en el sitio. Además, si el usuario coloca el mouse en el anuncio, podrá ampliar las diferentes partes del anuncio.

Deep Zoom se sirve de las imágenes de distintas resoluciones para lograr una velocidad de fotogramas elevada y una experiencia de apertura rápida incluso para imágenes muy grandes. En la carga, solo se necesita una pequeña cantidad de datos para mostrar algo rápidamente en la pantalla. La experiencia de carga inicial consiste en mostrar una versión de la imagen de baja resolución y combinarla con resoluciones más altas a medida que van estando disponibles. Este es el motivo por el cual, en Deep Zoom, las imágenes se muestran primero borrosas y después nítidas. También es el motivo por el que, en apariencia, Deep Zoom es capaz de abrir imágenes de inmediato, sin tener que esperar mucho tiempo a que se carguen los datos de la imagen e independientemente del tamaño de la imagen. Además de la carga inicial, este mismo comportamiento se experimenta cuando el usuario interactúa con la aplicación (por ejemplo, al hacer zoom y realizar movimientos panorámicos).

Deep Zoom usa animaciones de tipo muelle, lo que da a los usuarios la impresión de que se produce un movimiento suave (panorámica o zoom) alrededor de la imagen. Estas animaciones pasan de un estado inicial a un estado final, donde el gradiente relativo de tiempo (dicho de otro modo, la velocidad del cambio de imagen) decae exponencialmente hasta 1. El valor de destino de la animación de tipo muelle se actualiza inmediatamente en respuesta a una acción de zoom/panorámica del usuario. Cuando el desarrollador cambia la ventanilla de la pantalla, tiene lugar una transición para ajustar el contenido a la nueva ventanilla, y dicha transición también usa muelles para garantizar una uniformidad y continuidad visual.

Para poder crear una aplicación que use Deep Zoom, primero se debe crear una imagen de Deep Zoom. Una imagen de Deep Zoom se compone de mosaicos de imágenes JPEG o PNG con distintas resoluciones que constituyen una pirámide de imágenes. El tamaño del mosaico es normalmente de 256x256, pero se puede modificar. Cada mosaico se almacena en un archivo independiente y cada nivel de la pirámide se almacena en una carpeta independiente. Esto permite que Deep Zoom capture únicamente aquellos mosaicos que son necesarios para el tamaño actual de la imagen en pantalla, en lugar de descargar la imagen completa. Por ejemplo, si acerca una imagen para ver únicamente su parte central resaltada, Deep Zoom cargará únicamente los mosaicos resaltados, y no la imagen completa de 1024 x 1024.

Nota:
Las imágenes de Deep Zoom únicamente admiten archivos de imagen compatibles con la clase BitmapImage.

En la siguiente ilustración se muestra cómo funciona la imagen de Deep Zoom. La imagen propiamente dicha está disponible a resolución completa en la parte inferior de la pirámide y las versiones de menor resolución, por debajo de los 4 x 4 píxeles, se almacenan junto con la imagen a resolución completa. Las imágenes de cada nivel de la pirámide se almacenan en mosaicos de 256 x 256 píxeles (se indican mediante líneas blancas en las imágenes).

Crear estas pirámides a mano puede resultar tedioso, por lo que se recomienda usar una herramienta para convertir las imágenes en una pirámide de imágenes. La mejor forma de crear imágenes de Deep Zoom es usar una herramienta como Deep Zoom Composer. Con esta herramienta, puede crear una pirámide de imágenes a partir de una única imagen o de varias imágenes organizadas en una panorámica. El formato de archivo que se utiliza para obtener acceso a la pirámide de imágenes usa un esquema XML. De nuevo, puede generar este formato de archivo mediante Deep Zoom Composer, pero es posible que desee ejercer un control más preciso sobre el formato de archivo creando el XML a mano o realizando cambios manualmente en el archivo generado. Para obtener más información sobre el esquema XML utilizado por el formato de archivo de Deep Zoom, vea Información general sobre el formato de archivo de Deep Zoom.

Nota:

Photosynth es una herramienta que usa el mismo formato que Deep Zoom Composer, lo que la convierte en idónea para las aplicaciones de Deep Zoom. Photosynth se diseñó para crear modelos tridimensionales de 360 grados. Por ejemplo, podría tomar una serie de fotos digitales de un lugar que ha visitado y cargar las imágenes en Photosynth. Photosynth analiza cada foto en busca de similitudes, que es lo que usa para generar un modelo de dónde se tomaron las fotos (las une).

Cuando tiene una imagen de Deep Zoom, necesita un objeto Deep Zoom, como MultiScaleImage, para cargarla. A continuación, se muestra cómo crear un objeto MultiScaleImage en XAML.

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

A continuación, se muestra cómo crear un objeto MultiScaleImage en el código.

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

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

Observe que la propiedad Source señala a la imagen de Deep Zoom. Cuando la página web se abre, la imagen está inicialmente borrosa y, a continuación, se vuelve nítida.

Después de cargar una imagen de Deep Zoom, el usuario todavía no puede interactuar con la imagen. Para permitir la interacción, es necesario controlar los eventos MultiScaleImage y usar código para proporcionar la funcionalidad de zoom y panorámica.

En el ejemplo siguiente, se usa el evento MouseEnter para acercar el centro de la imagen cuando el puntero del mouse se desplaza sobre ella.

Ejecutar este ejemplo

<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);
}

En el ejemplo anterior, el método ZoomAboutLogicalPoint es el que hace el zoom y la panorámica. El primer parámetro es el multiplicador de zoom, que se incrementa a partir del factor de zoom actual de la imagen. En este ejemplo el zoom predeterminado es 1; por lo tanto, el valor 3 indica que el zoom se multiplica por tres. Si volviera a aplicar el zoom con el mismo valor, obtendría un zoom de 3*3, que es 9 veces el tamaño original.

Los parámetros segundo y tercero del método ZoomAboutLogicalPoint son, respectivamente, las coordenadas X e Y del punto lógico en el que se aplica el zoom (o donde va a realizarse la panorámica). Un punto lógico utiliza valores normalizados (de 0 a 1) para las posiciones X e Y de la imagen. Por tanto, el valor 0,5,0,5 está en el centro de la imagen porque 0,5 está en la mitad de 0 y 1. Si especificara un valor de coordenadas menor o igual que cero o mayor o igual que 1, el movimiento panorámico de la imagen se realizaría completamente fuera de la vista.

El área de la imagen que el usuario ve en todo momento se denomina área de ventanilla. En la ilustración siguiente se muestra el aspecto de la ventanilla desde un punto de vista conceptual.

Si desea trabajar con un conjunto de imágenes individuales de varias resoluciones para, por ejemplo, mover mediante programación cada imagen de varias resoluciones alrededor de la pantalla o filtrar las imágenes, puede resultarle más conveniente usar una colección de imágenes que una sola imagen de alta resolución. Hay dos pasos básicas necesarios para trabajar con una colección de imágenes:

1. Exporte las imágenes como una colección en lugar de como una única imagen.

   Para ello, puede utilizar Deep Zoom Composer. Simplemente asegúrese de que selecciona la opción Export as a collection (multiple images) al exportar su composición. Las imágenes de la colección que se exporta reciben el nombre de subimágenes, y cada una tiene su propia pirámide de imágenes.

2. Obtenga acceso a las subimágenes del objeto MultiScaleImage (objetos MultiScaleSubImage individuales) utilizando la propiedad SubImages.

   En el ejemplo siguiente se muestra cómo obtener una lista de subimágenes de un objeto 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;
   }

El ejemplo siguiente permite reorganizar las imágenes en un modelo de cuadrícula manipulando todos los objetos MultiScaleSubImage de la colección. Haga clic en el botón Randomize Images para ver el efecto.

Ejecutar este ejemplo

Descargar este ejemplo

Otros recursos