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

0

Теперь, когда вы знакомы со всеми подробностями поддержки звука и видео в Silverlight, можно перейти к изучению совершенно другого типа мультимедиа — глу­бокого зужирования (deep zoom).

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

Рис. 11.10. Эффект глубокого зумирования

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

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

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

Создать приложение Silverlight с глубоким зумированием несложно. Для этого суще­ствуют специальные инструменты. Наиболее популярна бесплатная программа Deep Zoom Composer (www.tinyurl.com/6xzp8v). С ее помощью можно преобразовать боль­шое изображение в группу неперекрывающихся небольших изображений, необходимых для глубокого зумирования в Silverlight. Кроме того, она позволяет объединить неболь­шие изображения в одно большое, сшив их для создания панорамы. Профессиональные дизайнеры часто пользуются более мощной программой AutoPano Pro, с помощью кото­рой можно откорректировать геометрию и освещение рисунка.

Совет. Если вы хотите всего лишь поэкспериментировать с глубоким зумированием, воспользуйтесь готовым панорамным изображением; например, выберите любую панораму на сайте Flickr. Естественно, если планируете использовать изображение в коммерческих целях, а не просто поэкспериментировать с ним на локальном компьютере, вы должны получить разрешение владельца. Огромные бесшовные фотографии Земли, полученные со спутников NASA, можно найти на сайте www.visibleearth.nasa.org.

Имея программу 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 (Компоновка), показанной на рис. 11.11. Бу­дет отображена пустая рабочая поверхность, на которой можно компоновать изображения.

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

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

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

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

Рис. 11.12. Экспорт в проект Silverlight

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

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

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

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

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

Рис. 11.13. Экспорт завершен; можно просмотреть проект в браузере, перейти к папкам набора и проекта или открыть окно справки

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

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

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

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

<MultiScaleImage x:Name="msi" Height="600" Width="800"/>

Автоматически сгенерированный проект содержит много разметки, обеспечиваю­щей дополнительные визуальные эффекты, такие как анимированные кнопки, зумиро­вание, возврат изображения в исходное состояние, переключение в полноэкранный ре­жим (рис. 11.15). Если вы решите создать проект DeepZoom с нуля, вам придется начать с пустого элемента MultiScalelmage.

Источником элемента MultiScalelmage служит файл XML, в котором определен набор изображений DeepZoom. Источник для MultiScalelmage можно задать в разметке, однако в автоматически сгенерированном проекте для этого используется следующий код.

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

msi.Source = new DeepZoomlmageTileSource(uri);

Адрес URI передается как параметр из тестовой страницы. По умолчанию в ка­честве источника используется файл dzc_output. xml, расположенный в папке

Generetedlmages.

Элемент MultiScalelmage предоставляет три базовых метода, описанных в табл. 11.1. Таблица 11.1. Методы элемента MultiScalelmage

Имя метода

Описание

ElementToLogicalPoint()

Преобразование физической точки элемента MultiScalelmage на экране в логическую точку в большом виртуальном изображении

LogicalToElementPoint О ZoomAboutLogicalPoint()

Преобразование логической точки виртуального изображения в физическую точку на экране

Операция зумирования на основе логической центральной точки и коэффициента зумирования; коэффициент должен быть больше нуля; значение 1 задает точное заполнение доступного пространства; при значениях меньше 1 изображение увеличивается, а больше 1 — уменьшается

В автоматически сгенерированном проекте методы элемента MultiScalelmage используются для управления зумированием. Метод Zoom () преобразует физические координаты точки в логические и зумирует изображение до данной точки.

private void Zoom(double newzoom, Point p)

{

// Запрет делать изображение слишком мелким

if (newzoom <0.5) {

newzoom = 0.5;

, }

msi.ZoomAboutLogicalPoint(newzoom / zoom, p.X, p.Y); zoom = newzoom;

}

С помощью метода Zoom О можно программно зумировать панораму в указанной точке, увеличивая изображение

Zoom(1.2, new Point(this.ActualWidth / 2, this.ActualHeight / 2) ) ;

или уменьшая его.

Zoom(.8, new Point(this.ActualWidth / 2, this.ActualHeight / 2));

Код автоматически сгенерированного проекта позволяет перетаскивать изображе­ние в области просмотра (аналогичный метод перетаскивания окружностей рассматри­вается в главе 4). Кроме того, сгенерированный код позволяет зумировать изображение, щелкая мышью на экране или поворачивая колесико мыши. При каждом перемещении указателя его позиция записывается.

this.lastMousePos = е.GetPosition(this.msi);

Когда пользователь щелкает на экране мышью, изображение увеличивается (или уменьшается, если в момент щелчка нажата клавиша <Shift>).

bool shiftDown =

(Keyboard.Modifiers & ModifierKeys.Shift) ==

Modi fierKeys.Shi ft;

double newzoom = zoom;

if (shiftDown) newzoom /= 2;

else

newzoom *= 2;

Zoom(newzoom,

msi.ElementToLogicalPoint(this.lastMousePos));

Поворот колесика мыши обрабатывается следующим образом.

double newzoom = zoom;

if (e.Delta > 0) newzoom /= 1.3;

else

newzoom *= 1.3;

Zoom(newzoom, msi.ElementToLogicalPoint(this.lastMousePos));

Рассмотренные выше коды используются в большинстве приложений Silverlight, поддерживающих глубокое зумирование. Вы можете редактировать их, приспосабливая к решаемой задаче. Например, на сайте Hard Rock Memorabilia при щелчке на экране приложение извлекает элемент, на котором щелкнул пользователь. Затем приложение выполняет зумирование и выводит дополнительную информацию об этом элементе.

Резюме

В этой главе рассмотрены вопросы интеграции звука и видео в приложения Silverlight. Обсуждены оптимизация производительности на стороне клиента и расши­ряемость приложения на стороне сервера.

Компания Microsoft уделила огромное внимание поддержке мультимедийных средств платформой Silverlight. Некоторые мультимедийные средства Silverlight даже более мощ­ные, чем аналогичные средства WPF. Например, в WPF нет кисти VideoBrush (вместо нее используется менее мощная кисть VisualBrush). Более того, в элементе MediaElement платформы WPF нет свойств, которые в приложениях Silverlight используются для управления буферизацией и маркерами. И наконец, в WPF нет средств глубокого зу­мирования! Так что в отношении мультимедийных средств тяжело утверждать, будто Silverlight — младшая сестра WPF.

Источник: Мак-Дональд, Мэтью. Silverlight 3 с примерами на С# для профессионалов. : Пер. с англ. —- М. : ООО «И.Д. Вильяме», 2010. — 656 с. : ил. — Парал. тит. англ.

По теме:

  • Комментарии