Deep Zoom — это функция Silverlight. Она используется для разделения и, масштабирования изображений плавно и с лучшей производительностью, но функция Deep Zoom еще не доступна для WPF, мы можем использовать ее с Deep Zoom composer и с control: MultiScaleImage.
В этом блоге мы вкратце обсудим функцию Deep Zoom. Deep Zoom предоставляет возможность интерактивного просмотра изображений высокого разрешения. Мы можем увеличивать и уменьшать изображения, не влияя на производительность приложения. Она обеспечивает плавную загрузку и панорамирование за счет предоставления изображений с несколькими разрешениями и использования пружинной анимации.
Deep Zoom использует изображения с несколькими разрешениями для достижения высокой частоты кадров и быстрого открытия для всех больших изображений. Для быстрого отображения чего-либо на экране при загрузке требуется лишь небольшой объем данных. Первоначально загружаются изображения с низким разрешением, а затем, по мере поступления изображений, добавляются изображения с более высоким разрешением. Это причина перехода от размытого к резкому изображению в Deep Zoom.
Это также причина того, что Deep Zoom может быстро открывать изображения, не затрачивая много времени на загрузку данных изображения. Кроме первоначальной загрузки, такое поведение проявляется по мере того, как пользователь взаимодействует с приложением. В нем используется пружинная анимация, которая обеспечивает плавное перемещение (панорамирование или масштабирование) по изображению для пользователей.
(Источник: https://docs.microsoft.com/en-us/previous-versions/windows/silverlight/dotnet-windows-silverlight/cc645050(v=vs.95)?redirectedfrom=MSDN )
Мы можем использовать Deep Zoom в различных сценариях, но вот три сценария, в которых он практически полезен.
- Изучение изображений высокого разрешения: Примером этого сценария может быть масштабирование отдельных частей большой карты для просмотра различных уровней деталей и использование мыши для перемещения по поверхности карты.
Читать далее: Что такое Treeview в Wpf?
- 3-D фотография: Съемка комнаты друг за другом, создание коллекции фотографий и создание 360-градусного изображения.
- Реклама: Мы можем создать изображение с низким разрешением и представить его в соответствии с общей темой рекламы, а затем постепенно создавать изображения с высоким разрешением, которые содержат больше впечатлений и данных о продукте. При первой загрузке объявления на странице оно привлечет внимание читателя, потому что объявление будет плавно увеличиваться, а затем загружать изображения высокого разрешения, а также, если мышь читателя попадает в объявление, различные части объявления могут увеличиваться.
Deep Zoom Composer: Deep Zoom composer — это инструмент, который доступен для разработчиков Silverlight для компоновки и экспорта нескольких изображений с такими функциями, как Zoom и Pan. Мы можем загрузить и установить Deep Zoom composer отсюда: Deep Zoom Composer
Как мы обсуждали ранее, Deep Zoom позволяет нам масштабировать и панорамировать изображения высокого разрешения без ущерба для производительности. Теперь мы рассмотрим, как использовать Deep Zoom вместе с приложением Silverlight.
Deep Zoom — это коллекция плиток изображений JPEG и PNG с различным разрешением, которые образуют пирамиду изображений. Размер плитки по умолчанию 256×256, мы можем изменять размер плиток.
Каждая плитка хранится в отдельном файле, то же самое относится и к пирамиде. Для пирамиды каждый уровень пирамиды хранится в отдельной папке. Это позволяет Deep Zoom извлекать нужный размер для текущего размера изображения на экране, вместо того чтобы загружать все изображение целиком.
Например, если вы увеличиваете масштаб изображения, чтобы увидеть выделенную часть изображения, Deep Zoom загрузит только выделенную плитку изображения вместо загрузки всего изображения. Мы можем создавать изображения Deep Zoom с помощью инструмента Deep Zoom Composer.
Шаги для создания изображения Deep Zoom:
- Прежде всего, необходимо загрузить и установить Deep Zoom Composer.
- Запустите Deep Zoom Composer и создайте новый проект, затем Import workspace, после чего нажмите на Add image и добавьте изображение высокого разрешения в созданный проект.
- Теперь перейдите в рабочее пространство композиции, на вкладке Изображения перетащите изображение на артборд.
- Придайте изображению нужный размер, нажмите на кнопку Export workspace и затем нажмите на кнопку custom.
- После этого выберите Silverlight Deep Zoom в разделе Тип вывода, а затем укажите имя и местоположение. В настройках изображения выберите Экспортировать как композицию.
- Нажмите на кнопку экспорта, чтобы экспортировать файл изображений Deep Zoom.
После создания изображения Deep Zoom для его загрузки мы можем использовать элемент управления MultiScaleImage. Используя класс MultiScaleImage, мы можем открывать изображения с различным разрешением, которые можно увеличивать/уменьшать и панорамировать. Мы не можем увеличивать или панорамировать изображение, загруженное MultiScaleImage, но он включает различные методы для увеличения и панорамирования, которые мы можем использовать. По умолчанию изображение, загружаемое MultiScaleImage, масштабируется на страницу при первой загрузке страницы. Мы можем отключить это, установив свойство UseSprings в false, но мы должны установить это свойство в true, когда пользователи взаимодействуют с изображениями. Элемент управления MultiScaleImage поддерживает только изображения Deep Zoom без поддержки Deep Zoom Collection. Для использования элемента управления MutliScaleImage нам необходимо добавить ссылку на DeepZoom.dll в XAML-файл.
One Stop Solution для разработки WPF приложений — свяжитесь с нами прямо сейчас.
<window title="MainWindow" x:class="DeepZoom.Application.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:dz="clr-namespace:DeepZoom.Controls;assembly=DeepZoom" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<border background="Blue">
<dz:multiscaleimage source="http://static.seadragon.com/content/misc/color-flower.dzi">
</dz:multiscaleimage></border>
</window>
После загрузки изображения Deep Zoom мы еще не можем взаимодействовать с изображением, для взаимодействия с изображением мы должны обрабатывать события MultiScaleImage, а для обеспечения функциональности Zoom и Pan мы должны написать код.
Заключение
Deep Zoom — это волшебная функция Silverlight, она используется для масштабирования и разделения изображений высокого разрешения с лучшей производительностью. Deep Zoom используется в различных областях, таких как 3-D фотография, реклама и т.д. Эта функция Silverlight пока недоступна в WPF. Мы можем использовать Deep Zoom в WPF с помощью Deep Zoom Composer и элемента управления MultiScaleImage.
В этом блоге мы рассмотрели, как использовать Deep Zoom с помощью Deep Zoom Composer и MutliScaleImage. Deep Zoom Composer — это инструмент, доступный для Silverlight, с помощью Deep Zoom composer мы также рассмотрели, как создавать изображения Deep Zoom. MultiScaleImage — это элемент управления Silverlight, который используется для увеличения и панорамирования изображения. Чтобы использовать этот элемент управления, мы должны добавить ссылку на DeepZoom.dll в наш XAML-файл.