Глубокое зуммирование

51

Основная цель глубокого зуммирования (deep zoom) состоит в предоставлении зуммируемого интерфейса для вывода огромных изображений. Типичное изображение, используемое для глубокого зуммирования, настолько большое, что при исходном разрешении не поместится ни на каком экране.

Сначала изображение выводится в уменьшенном масштабе, чтобы пользователь мог обозреть всю картину "с высоты птичьего полета". Затем пользователь щелкает в месте, которое хочет рассмотреть подробнее. При каждом щелчке Silverlight увеличивает изображение, позволяя рассмотреть все более тонкие детали.

Процесс глубокого зуммирования показан на рисунке ниже. На верхнем рисунке приведена панорама парка. Пользователь щелкает на ней несколько раз, и браузер выводит увеличенное изображение, показанное ниже:

Исходное изображение
Зуммированное изображение

Обычно изображение, подготовленное для глубокого зуммирования, состоит из десятков или сотен небольших изображений, из которых бесшовно составляется панорама. Однако встроенный в Silverlight инструмент глубокого зуммирования может работать и с одним огромным графическим файлом. Пример использования глубокого зуммирования можно увидеть на сайте memorabilia.hardrock.com.

Глубокое зуммирование — не новая идея. Многие компании реализуют ее в своих программных продуктах. В частности, в Adobe Flash - главном конкуренте Silverlight - есть аналогичное средство, которое называется Zoomify. Таким образом, глубокое зуммирование в настоящее время - на удивление зрелая, развитая технология, обеспечивающая плавный переход (а не просто скачки между изображениями) и высокую производительность.

Создать приложение Silverlight с глубоким зуммированием несложно. Для этого существуют специальные инструменты. Наиболее популярна бесплатная программа Deep Zoom Composer. С ее помощью можно преобразовать большое изображение в группу неперекрывающихся небольших изображений, необходимых для глубокого зуммирования в Silverlight. Кроме того, она позволяет объединить небольшие изображения в одно большое, состыковав их для создания панорамы.

Профессиональные дизайнеры часто пользуются более мощной программой AutoPano Pro, с помощью которой можно откорректировать геометрию и освещение рисунка.

Имея программу Deep Zoom Composer и подходящее изображение (или изображения), можете приступать к работе.

Создание набора изображений для глубокого зуммирования

Запустите программу Deep Zoom Composer и выберите команду New Project. Задайте имя и расположение проекта. Программа создаст две папки. Папка Source Images будет содержать все исходные версии рисунков. В папку Working Data будут записаны десятки файлов изображений, сгенерированных при компоновке большого рисунка.

Не путайте проект DeepZoom с проектом Silverlight. Проект DeepZoom можно открыть только в программе Deep Zoom Composer. Чтобы создать проект Silverlight, нужно экспортировать набор изображений.

Создание набора изображений с помощью Deep Zoom Composer состоит из трех этапов. В первую очередь импортируйте рисунок или рисунки, которые планируете использовать, а затем скомпонуйте их. Если рисунок один, этот этап не займет много времени, если же рисунков много, их нужно состыковать вручную. И наконец, экспортируйте набор изображений в проект Silverlight, генерируемый в этой же рабочей среде.

В процессе создания набора можно переключаться между этапами с помощью трех кнопок (фактически можно считать их корешками вкладок), расположенных в верхней части окна Deep Zoom Composer. Обычно создание начинают с вкладки Import (Импорт):

  1. Чтобы получить рисунок, щелкните на кнопке Import, найдите нужный файл и щелкните на кнопке ОК. Большое изображение импортируется медленно, за это время можно выпить чашечку кофе.

  2. Повторяя п. 1, импортируйте все нужные изображения.

  3. Щелкните на кнопке Compose (Компоновка). Будет отображена пустая рабочая поверхность, на которой можно компоновать изображения:

    Компоновка изображений в окне Deep Zoom Composer

    Программа Deep Zoom Composer предоставляет ряд средств, облегчающих компоновку рисунков. Например, их можно разместить в регулярной решетке. Для этого выделите нужные рисунки, удерживая клавишу <Ctrl>. Нажатие комбинации клавиш <Ctrl+A> приводит к выделению всех рисунков. Щелкните правой кнопкой мыши на выделенных рисунках и выберите команду Arrange into Grid. Установите параметры решетки и щелкните на кнопке ОК.

    Этот способ особенно полезен при создании набора изображений из разрозненных и перекрывающихся рисунков. Чтобы создать иллюзию одного большого рисунка, сшейте перекрывающиеся рисунки в панораму. Для этого выделите рисунки, щелкните на них правой кнопкой мыши и выберите команду Create Panoramic Photo. Учитывайте, что процесс генерации панорамы может занять много времени, потому что программа Deep Zoom Composer вынуждена искать совпадающие фрагменты.

  4. Чтобы добавить рисунок на рабочую поверхность, перетащите его с нижней панели. Если используется несколько рисунков, нужно каждый из них перетащить, позиционировать и установить для каждого его размеры. Изображения могут перекрываться, но перекрываться они должны правильно.

  5. Щелкните на кнопке Export (Экспорт). Программа предоставляет несколько вариантов экспорта. Два наиболее полезных варианта — экспорт набора в службу Microsoft DeepZoomPix, которая предоставит его приложениям посредством Интернета, и создание проекта Silverlight, который можно отредактировать и развернуть на собственном веб-сервере:

    Экспорт в проект Silverlight
  6. Чтобы создать проект Silverlight, щелкните на корешке вкладки Custom и установите переключатель Silverlight Deep Zoom.

  7. В текстовое поле Name введите имя проекта. В поле Location задайте папку, в которой будет создан проект.

  8. Установите переключатель Export as a collection (Экспортировать как коллекцию) для создания набора изображений. В раскрывающемся списке Templates выберите нужный шаблон проекта Silverlight. Набор Deep Zoom можно экспортировать и без создания файлов проекта Silverlight, однако проект содержит много полезного кода, позволяющего панорамировать и зуммировать изображение с помощью мыши. Если создать проект с нуля, то придется самому писать необходимый код, обеспечивающий интерактивность страницы.

    Наиболее полезны два шаблона: Deep Zoom Classic (содержит стандартные средства зуммирования и панорамирования) и Blend 4 Behaviors (приводит к тому же результату, но дополнительно предоставляет средства поведений, которые можно настраивать в программе Expression Blend).

  9. В группе Image settings (Параметры рисунка) выберите формат PNG или JPEG. Формат PNG обеспечивает сжатие без потери информации. Однако формат JPEG позволяет при том же размере файла обеспечить лучшее качество изображения.

  10. Щелкните на кнопке Export, чтобы создать набор изображений и проект Silverlight. Создание может длиться долго. Когда оно будет завершено, появится окно с несколькими пиктограммами, позволяющими просмотреть проект в браузере или перейти к папке, содержащей проект или набор изображений.

Использование набора изображений в Silverlight

При экспорте изображения программа Deep Zoom Composer создает приложение Silverlight с именем DeepZoomProject и тестовый веб-сайт DeepZoomProjectSite. Проект содержит код, необходимый для панорамирования, прокручивания и зуммирования изображения. Сайт DeepZoomProjectSite содержит скомпилированный проект Silverlight и набор изображений, содержащий фрагменты рисунка с разными разрешениями.

На рисунке ниже показаны обе части решения. Как обычно, при выполнении проекта Visual Studio компилирует приложение Silverlight в файл XAP и копирует его в папку ClientBin тестового веб-сайта. Кроме того, папка ClientBin содержит еще и вложенную папку GeneratedImages, в которой находится набор изображений:

Набор изображений в решении DeepZoom

Для вывода изображения DeepZoom в приложении Silverlight необходим элемент MultiScaleImage:

<MultiScaleImage x:Name="msi" Source="/GeneratedImages/dzc_output.xml"/>

Автоматически сгенерированный проект содержит много разметки, обеспечивающей дополнительные визуальные эффекты, такие как анимированные кнопки, зуммирование, возврат изображения в исходное состояние, переключение в полноэкранный режим:

Кнопки управления изображением в проекте DeepZoom

Если решите создать проект DeepZoom с нуля, то придется начать с пустого элемента MultiScaleImage.

Источником элемента MultiScaleImage служит файл XML, в котором определен набор изображений DeepZoom. По умолчанию в качестве источника используется файл dzc_output.xml, расположенный в папке GeneretedImages.

Элемент MultiScaleImage предоставляет три базовых метода, описанных в таблице:

Методы элемента MultiScaleImage
Метод Описание
ElementToLogicalPoint() Преобразование физической точки элемента MultiScaleImage на экране в логическую точку в большом виртуальном изображении
LogicalToElementPoint() Преобразование логической точки виртуального изображения в физическую точку на экране
ZoomAboutLogicalPoint() Операция зуммирования на основе логической центральной точки и коэффициента зуммирования. Коэффициент должен быть больше нуля. Значение 1 задает точное заполнение доступного пространства. При значениях меньше 1 изображение увеличивается, а больше 1 — уменьшается

В автоматически сгенерированном проекте методы элемента MultiScaleImage используются для управления зуммированием.

Пройди тесты
Лучший чат для C# программистов