Im folgenden Beispiel wird Deep Zoom in Aktion gezeigt. Um dieses Beispiel auszuprobieren, klicken Sie zum Vergrößern der Ansicht auf die Schaltfläche mit dem Pluszeichen (+), oder verwenden Sie das Mausrad. Um die Ansicht zu verkleinern, klicken Sie auf die Schaltfläche mit dem Minuszeichen (–), oder verwenden Sie das Mausrad. Um die Ansicht zurückzusetzen, klicken Sie auf die erste quadratische Schaltfläche. Um das Bild neu anzuordnen, ziehen Sie es mit der Maus.

Führen Sie dieses Beispiel aus.

Laden Sie dieses Beispiel herunter.

Ein Beispiel für eine Website, die Deep Zoom verwendet, finden Sie unter Deep Zoom example. Um die Ansicht zu vergrößern und zu verkleinern, verwenden Sie das Mausrad. Um das Bild neu anzuordnen, ziehen Sie es mit der Maus.

Deep Zoom lässt sich in vielen verschiedenen Bereichen einsetzen, aber es gibt drei Hauptszenarien, in denen Deep Zoom besonders nützlich ist.

• Untersuchung sehr großer Bilder oder solcher mit hoher Auflösung: Ein klassisches Beispiel dafür bildet das Zoomen auf Teile einer großen Karte, um andere Detailebenen anzuzeigen und dann mithilfe der Maus auf der Kartenoberfläche zu navigieren. Wenn Benutzer die Ansicht verschieben, erhalten sie mithilfe von Animationen den Eindruck, dass sie sich auf dem Bild von einem Ort zum anderen "bewegen". Ein weiteres Beispiel besteht in der Untersuchung einer professionellen Fotokomposition aus mehreren hochauflösenden Bildern.

• 3D-Fotografie: Nehmen Sie nacheinander mehrere Fotos von einem Zimmer auf, sodass sich eine Sammlung von Fotos ergibt, die ein 360 Grad-Bild des Zimmers bildet. Nun können Benutzer die Bilder des Zimmers schwenken, wobei ein Foto in das jeweils nächste übergeht.

• Werbeanzeigen: Sie können ein relativ niedrig auflösendes Bild erstellen, um die wesentliche Absicht der Anzeige darzustellen, und dann Bilder mit zunehmend höherer Auflösung einfügen, die mehr Eindrücke vom Produkt bieten und mehr Daten enthalten. Wenn die Seite, auf der die Anzeige eingebettet ist, erstmals geladen wird, wird die Anzeige sanft geschärft und erregt die Aufmerksamkeit des Lesers durch das Laden von Bildern mit immer höherer Auflösung. Da die Anzeige schrittweise geladen wird, beeinträchtigt sie den Benutzer bei Verwendung der Site nicht maßgeblich. Wenn zudem die Maus des Benutzers über die Anzeige geführt wird, können weitere Teile der Anzeige eingezoomt werden.

Deep Zoom verwendet Bilder mit mehrfacher Auflösung und erzielt so auch für sehr große Bilder eine hohe Framerate und einen schnellen Ladevorgang. Beim Laden wird nur eine kleine Datenmenge benötigt, um in sehr kurzer Zeit etwas auf dem Bildschirm anzuzeigen. Anfangs wird beim Laden eine Bildversion mit geringer Auflösung angezeigt, und die Auflösung wird schrittweise erhöht, wenn weitere Daten zur Verfügung stehen. Dies ist die Ursache für den Übergang von einem verschwommenen zu einem scharfen Bild in Deep Zoom. Es ist auch der Grund dafür, dass Deep Zoom Bilder unabhängig von deren Größe scheinbar sofort und ohne viel Wartezeit zum Laden der Bilddaten öffnen kann. Dieses Verhalten tritt nicht nur beim anfänglichen Laden auf, sondern auch, wenn Benutzer mit der Anwendung kommunizieren (beispielsweise beim Zoomen und Schwenken).

Deep Zoom verwendet Federanimationen, die Benutzern den Eindruck einer gleichmäßigen Bewegung (Schwenken oder Zoomen) um das Bild vermitteln. Diese Federn werden vom Anfangs- bis zum Endzustand animiert, wobei der Farbverlauf relativ zur Zeit exponentiell gegen 1 abnimmt. Der Federzielwert wird unmittelbar nach einer Zoom-/Schwenkaktion des Benutzers aktualisiert. Wenn der Entwickler den Anzeigeviewport ändert, wird der Übergang zum Anpassen des Inhalts an die Größe des neuen Viewports ebenfalls mit Federn ausgeführt, um einen fließenden Eindruck und visuelle Kontinuität zu gewährleisten.

Bevor Sie eine Anwendung erstellen können, die Deep Zoom verwendet, müssen Sie ein Deep Zoom-Bild erstellen. Ein Deep Zoom-Bild besteht aus Kacheln von JPEG- oder PNG-Bildern mit verschiedenen Auflösungen, die eine Bildpyramide bilden. Die Kachelgröße beträgt in der Regel 256 x 256, aber diese Größe kann geändert werden. Jede Kachel wird in einer eigenen Datei gespeichert, und jede Pyramidenebene wird in einem eigenen Ordner gespeichert. So muss Deep Zoom nur die Kacheln abrufen, die für die aktuelle Bildgröße auf dem Bildschirm erforderlich sind, statt das gesamte Bild herunterzuladen. Wenn Sie z. B. die Ansicht vergrößern, um nur den hervorgehobenen Mittelteil eines Bilds anzuzeigen, lädt Deep Zoom nur die hervorgehobenen Kacheln und nicht das gesamte Bild in der Größe von 1024 x 1024.

Hinweis:
Deep Zoom-Bilder unterstützen nur die von der BitmapImage-Klasse unterstützten Bilddateien.

In der folgenden Abbildung wird gezeigt, wie das Deep Zoom-Bild funktioniert: Das Bild selbst ist in vollständiger Auflösung am unteren Rand der Pyramide verfügbar, und Versionen mit niedrigerer Auflösung bis zu 4 x 4 Pixel werden neben dem Bild mit vollständiger Auflösung gespeichert. Die Bilder auf den einzelnen Pyramidenebenen werden als 256 x 256 Pixelflächen gespeichert (in den Bildern durch die weißen Linien gekennzeichnet).

Da das manuelle Erstellen solcher Pyramiden langwierig sein kann, wird die Verwendung eines Tools zum Konvertieren der Bilder in eine Bildpyramide empfohlen. Deep Zoom-Bilder lassen sich am besten mit Tools wie Deep Zoom Composer erstellen. Mit diesem Tool erstellen Sie eine Bildpyramide aus einem einzelnen Bild oder aus mehreren in einem Panorama angeordneten Bildern. Das Dateiformat für den Zugriff auf die Bildpyramide verwendet ein XML-Schema. Wiederum können Sie dieses Dateiformat mit Deep Zoom Composer generieren, doch möglicherweise benötigen Sie eine genauere Steuerung des Dateiformats, indem Sie das XML von Hand erstellen oder die Änderungen an der generierten Datei manuell vornehmen. Weitere Informationen zum XML-Schema für das Deep Zoom-Dateiformat finden Sie unter Übersicht über das Deep Zoom-Dateiformat.

Hinweis:

Photosynth ist ein Tool, das das gleiche Format wie Deep Zoom Composer verwendet, sodass es für Deep Zoom-Anwendungen gut geeignet ist. Photosynth wurde zum Erstellen dreidimensionaler 360 Grad-Modelle entwickelt. Sie können z. B. mehrere Digitalfotos von einem Ort machen, den Sie besuchen, und die Bilder in Photosynth laden. Photosynth analysiert jedes Foto auf Ähnlichkeiten, anhand derer ein Modell des Orts erstellt wird, an dem die Fotos aufgenommen wurden (sie werden zusammengeheftet).

Wenn ein Deep Zoom-Bild zur Verfügung steht, benötigen Sie ein Deep Zoom-Objekt, z. B. MultiScaleImage, um es zu laden. Im Folgenden wird gezeigt, wie ein MultiScaleImage in XAML erstellt wird.

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

Im Folgenden wird gezeigt, wie MultiScaleImage im Code erstellt wird.

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

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

Beachten Sie, dass die Source-Eigenschaft auf das Deep Zoom-Bild zeigt. Wenn die Webseite geöffnet wird, ist das Bild anfänglich verschwommen und wird dann scharf.

Nachdem Sie ein Deep Zoom-Bild geladen haben, kann der Benutzer nicht gleich mit dem Bild interagieren. Um die Interaktion zu ermöglichen, müssen Sie MultiScaleImage- Ereignisse behandeln und mithilfe von Code die Zoom- und Schwenkfunktion bereitstellen.

Im folgenden Beispiel wird das MouseEnter-Ereignis zum Zoomen in die Bildmitte verwendet, wenn der Mauszeiger über das Bild bewegt wird.

Führen Sie dieses Beispiel aus.

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

Im vorangehenden Beispiel wird das Zoomen und Schwenken von der ZoomAboutLogicalPoint-Methode ausgeführt. Der erste Parameter ist der Zoommultiplikator, der vom aktuellen Zoomfaktor des Bilds inkrementiert wird. In diesem Beispiel beträgt beispielsweise der Standardzoom 1, daher bedeutet der Wert 3, dass 3-fach gezoomt wird. Wenn Sie erneut mit demselben Wert zoomen, wird die Ansicht auf 3 * 3, d. h. die 9-fache Originalgröße, vergrößert.

Den zweiten und dritten Parameter der ZoomAboutLogicalPoint-Methode bilden die jeweiligen X- und Y-Koordinaten des logischen Punkts, an dem gezoomt (geschwenkt) wird. Ein logischer Punkt verwendet für die Positionen x und y des Bilds normalisierte Werte (0 bis 1). So befindet sich der Wert 0,5;0,5 in der Mitte des Bilds, da 0,5 in der Mitte zwischen 0 und 1 liegt. Wenn Sie einen Koordinatenwert kleiner oder gleich 0 bzw. größer oder gleich 1 angegeben haben, wird das Bild so geschwenkt, dass es in der Ansicht nicht mehr enthalten ist.

Der Bereich des Bilds, den der Benutzer zu einem beliebigen Zeitpunkt anzeigt, wird als Viewportbereich bezeichnet. Die folgende Abbildung zeigt eine schematische Darstellung des Viewportbereichs.

Wenn Sie z. B. mit einem Satz einzelner Bilder mit mehrfacher Auflösung arbeiten, einzelne Bilder mit mehrfacher Auflösung programmgesteuert auf dem Bildschirm verschieben oder die Bilder filtern möchten, können Sie statt eines einzelnen Bilds mit hoher Auflösung eine Auflistung von Bildern verwenden. Um mit einer Auflistung von Bildern zu arbeiten, müssen Sie zwei grundlegende Aufgaben durchführen:

1. Exportieren Sie die Bilder als Auflistung und nicht als einzelne Bilder.

   Dazu können Sie Deep Zoom Composer verwenden. Achten Sie nur darauf, die Option Als Auflistung exportieren (mehrere Bilder) auszuwählen, wenn Sie die Zusammensetzung exportieren. Bilder in der Auflistung, die Sie exportieren, werden als Unterbilder bezeichnet, und jedes verfügt über eine eigene Bildpyramide.

2. Auf die Unterbilder im MultiScaleImage (einzelne MultiScaleSubImage-Objekte) greifen Sie mit der SubImages-Eigenschaft zu.

   Im folgenden Beispiel wird gezeigt, wie eine Liste von Unterbildern in einem MultiScaleSubImage abgerufen wird.

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

Das folgende Beispiel ermöglicht es Ihnen, Bilder in einem Rastermuster durch Bearbeiten aller MultiScaleSubImage-Objekte in der Auflistung neu anzuordnen. Klicken Sie auf die Schaltfläche Randomize Images, um den Effekt anzuzeigen.

Führen Sie dieses Beispiel aus.

Laden Sie dieses Beispiel herunter.

Weitere Ressourcen