Разработка приложений на Silverlight
Задание 3. Реализация Deep Zoom в Microsoft Visual Web Developer 2008 Express.
1)Базовое приложение, которое позволит уменьшать и увеличивать масштаб изображений реализуется с помощью элемента управления MultiScaleImage, который ассоциируется с файлом, содержащим метаданные изображений. Файл метаданных создается в редакторе Deep Zoom Composer, который можно загрузить в Центре загрузки Microsoft (http://www.microsoft.com/rus/download/Default.mspx).
Deep Zoom Composer выполняет простую последовательность операций, включающую Import (Импорт), за которым следует Compose (Компоновка) с последующим Export (Экспорт).
Работа в Deep Zoom Composer начинается с вкладки Import, где с помощью кнопки Add Image добавляются последовательно все необходимые и заранее подготовленные в графическом редакторе изображения, чтобы выбрать изображение. На рисунке можно увидеть, что добавлены три изображения.
Следующий шаг - компоновка, которая осуществляется с помощью опций на вкладке Compose. На этой вкладке изображения размещаются на соответствующих поверхностях. При этом можно менять масштаб изображений так, чтобы разместить в них другие изображения.
На третьем этапе выполняется экспорт. Для этого будем используется вложенная вкладка Custom вкладки Export редактора Deep Zoom Composer
На вкладке Export имеется несколько опций. Для экспорта в готовое Silverlight -приложение следует выбрать вкладку Custom, а затем выбрать кнопку-переключатель Silverlight Deep Zoom.
Чтобы экспортировать метаданные изображений, скомпонованных в Deep Zoom, необходимо присвоить имя проекту и экспортировать проект в заданный каталог. При этом в указанном каталоге появится папка GeneratedImages. Один из файлов в данной папке - SparseImageSceneGraph.xml - является конфигурационным и определяет каждое изображение с указанием его местоположения на других изображениях с разными уровнями увеличения.
По-сути, редактор Deep Zoom Composer разделяет изображение на равные фрагменты, поэтому при масштабировании рисунка загружается не все изображение, а лишь просматриваемые фрагменты, что очень эффективно при работе с большими изображениями. При просмотре изображения в маленьком масштабе, все фрагменты видны уменьшенными, следовательно, с меньшим разрешением. При увеличении масштаба изображения до пределов разрешающей способности (или выше), видна лишь часть рисунка, т.е. потребуется загружать только те фрагменты, которые представляют видимую часть изображения, что обеспечивает экономию трафика и сокращение времени загрузки.
Deep Zoom Composer после экспорта в Silverlight Deep Zoom автоматически дополнительно предлагает просмотреть работу Silverlight приложения в браузере.
В созданном приложении Silverlight встроена функциональность управления мышью, благодаря чему можено перемещаться по изображению или менять его масштаб.
2)Создайте проект Silverlight приложения в Microsoft Visual Web Developer 2008 Express. В папку ClientBin проекта веб-приложения ASP.NET скопируйте созданную при экспорте папку GeneratedImages.
Формирование представления содержимого Deep Zoom осуществляется с помощью элемента управления MultiScaleImage. Добавьте MultiScaleImage в файл MainPage.xaml, и в качестве значения его свойства Source задайте местоположение XML -файла с метаданными скомпонованного изображения.
<UserControl x:Class="DeepZoom.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
<Canvas>
<MultiScaleImage x:Name="dz" Source="/GeneratedImages/dzc_output.xml" H
eight="480" Width = "640" />
</Canvas>
</UserControl>После компиляции и выполнения полученного Silverlight приложения элемент управления MultiScaleImage cформирует визуальное представление верхнего элемента скомпонованного изображения.
3)Для перемещения изображения будут использоваться стандартные события, связанные с мышью: MouseLeftButtonDown, MouseLeftButtonUp и MouseMove. Для этого необходимо добавить обработку этих событий элементом MultiScaleImage.
С этой целью, необходимо внести необходимые изменения в файлы MainPage.xaml и MainPage.xaml.cs:
<UserControl x:Class="DeepZoom.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
<Canvas>
<MultiScaleImage x:Name="dz" Source="/GeneratedImages/dzc_output.xml"
MouseLeftButtonDown = "MultiScaleImage_MouseLeftButtonDown"
MouseLeftButtonUp="MultiScaleImage_MouseLeftButtonUp"
MouseMove="MultiScaleImage_MouseMove"
Height="480" Width = "640">
</MultiScaleImage>
</Canvas>
</UserControl>using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Browser;
namespace DeepZoom
{
public partial class MainPage : UserControl
{
bool dragging = false;
double dx = 0;
double dy = 0;
Point p0;
Point p1;
Point pLast;
void Page_Loaded(object sender, RoutedEventArgs e)
{
HtmlPage.RegisterScriptableObject("MySilverlightObject", this);
}
public MainPage()
{
InitializeComponent();
}
private void MultiScaleImage_MouseLeftButtonDown( object sender, MouseButtonEventArgs e)
{
dragging = true;
p0 = dz.ElementToLogicalPoint(new Point(0, 0));
p1 = dz.ElementToLogicalPoint(new Point(640, 480));
dx = 0;
dy = 0;
double x = e.GetPosition(null).X;
double y = e.GetPosition(null).Y;
pLast = dz.ElementToLogicalPoint(new Point(x, y));
}
private void MultiScaleImage_MouseLeftButtonUp( object sender, MouseButtonEventArgs e)
{
dragging = false;
p0 = new Point();
p1 = new Point();
pLast = new Point();
dx = 0;
dy = 0;
}
private void MultiScaleImage_MouseMove(object sender, MouseEventArgs e)
{
if (dragging)
{
if (e!=null)
{
double x = e.GetPosition(null).X;
double y = e.GetPosition(null).Y;
Point pCurrent = dz.ElementToLogicalPoint(new Point(x, y));
if (pLast != null)
{
dx += (pCurrent.X - pLast.X);
dy += (pCurrent.Y - pLast.Y);
Point origin = new Point(p0.X - dx, p0.Y - dy);
dz.ViewportOrigin = origin;
}
pLast = pCurrent;
}
}
}
}
}Предполагается, что пользователь удерживает кнопку мыши и двигает мышью, поэтому свойству dragging (перетягивание) присваивается значение true. Далее, необходимо получить текущие координаты видимой части изображения. В Silverlight логические координаты верхнего левого угла и нижнего правого угла окна можно получить с помощью метода ElementToLogicalPoint, передав в него физические координаты. Кроме того, необходимо получать логические координаты курсора мыши. Для этого вызывается API ElementToLogicalPoint, в него передается текущее положение мыши (которое можно получить из объекта MouseEventArgs, передаваемого в эту функцию) и возвращаемые результаты сохраняются в переменной pLast.
4)Создание функциональности масштабирования с использованием колеса мыши.
Для потребуется добавить в элемент MultiScaleImage обработку события MouseWheel:
<MultiScaleImage x:Name="dz" Source="/GeneratedImages/dzc_output.xml"
MouseLeftButtonDown = "MultiScaleImage_MouseLeftButtonDown"
MouseLeftButtonUp="MultiScaleImage_MouseLeftButtonUp"
MouseMove="MultiScaleImage_MouseMove" MouseWheel="MultiScaleImage_MouseWheel"
Height="480" Width = "640">
</MultiScaleImage>и в файле MainPage.xaml.cs описание метода MultiScaleImage_MouseWheel класса UserControl:
private void MultiScaleImage_MouseWheel(object sender, MouseWheelEventArgs e)
{
double dZoomFactor = 1.33;
if (e.Delta < 0) dZoomFactor = 1 / 1.33;
Point pz = dz.ElementToLogicalPoint(new Point(e.GetPosition(
null).X, e.GetPosition(null).Y));
dz.ZoomAboutLogicalPoint(dZoomFactor, pz.X, pz.Y);
}Скриншоты работы в веб-браузере Silverlight приложения с поддержкой перемещения и масштабирования для композиции из изображений с разными уровнями детализации приведены ниже.
Рис. 23.14. Просмотр в веб-браузере Deep Zoom сцены с последовательным увеличением уровня детализации
Задание 4. Работа с коллекциям Deep Zoom в Silverlight.
Кроме возможности увеличения и уменьшения изображения, можно также создавать коллекции изображений и работать с ними в масштабируемой среде.
При экспорте изображений из редактора Deep Zoom предлагается опция " Create Collection " (cоздать коллекцию), которая обеспечивает создание коллекции изображений.
Для работы с изображениями коллекции Silverlight предлагает коллекцию SubImages. Чтобы иметь возможность работать с коллекцией, необходимо описать событие ImageOpenSucceeded. Это событие будет формироваться в случае успешной загрузки и отображения.
5) С помощью Deep Zoom Compose подготовьте коллекцию изображений и экспортируйте с опцией " Create Collection ".
6) Создайте проект Silverlight приложения в Microsoft Visual Web Developer 2008 Express. В папку ClientBin проекта веб-приложения ASP.NET скопируйте созданную при экспорте папку GeneratedImages.
Формирование представления содержимого Deep Zoom осуществляется с помощью элемента управления MultiScaleImage. Добавьте MultiScaleImage в файл MainPage.xaml, и в качестве значения его свойства Source задайте местоположение XML -файла с метаданными скомпонованного изображения.
Содержимое файлов MainPage.xaml и MainPage.xaml.cs приводится ниже.
<UserControl x:Class="DeepZoomCollection.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
<Canvas>
<MultiScaleImage x:Name="dz" Source="/GeneratedImages/dzc_output.xml"
ImageOpenSucceeded="dz_ImageOpenSucceeded" Height="480" Width="640">
</MultiScaleImage>
</Canvas>
</UserControl>using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace DeepZoomCollection
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
}
private void dz_ImageOpenSucceeded(object sender, RoutedEventArgs e)
{
int nImages = dz.SubImages.Count;
for (int lp = 0; lp < nImages; lp++)
{
dz.SubImages[lp].ViewportOrigin = new Point(-lp * 0.5, -lp * 0.5);
}
}
}
}В случае с коллекцией, работа с каждым изображением осуществляется через SubImages[lp] , где lp - переменная цикла, которая может принимать значения от 0 до числа, соответствующего количеству изображений в коллекции.
Самостоятельное задание
Создайте графический индикатор времени просмотра видеоролика в виде прямоугольника, длина которого динамически пересчитывается (с обновлением вида фигуры) при нажатии "Pause" по формуле:
