Мультимедиа, рукописный ввод и Deep Zoom

Элемент управления InkPresenter

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

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

• Ввод с помощью пера Обычно преобразователи графической информации, вводимой пером поддерживаются Планшетными ПК (Tablet PC), но существуют также настольные компьютеры, которые поддерживают подключение внешних планшетов. Эти устройства используют возможности ввода с помощью пера, предоставляемые в Silverlight. Они создают Ink (Рукописный фрагмент), который может быть интегрирован в Веб-страницы Silverlight, таким образом, обеспечивая поддержку рукописного ввода, рисования, рукописных примечаний и прочих форматов ввода в Веб.
• Сенсорный ввод Сенсорные экраны широко применяются в интерактивных терминалах или других местах, где использование стилуса или клавиатуры было бы слишком громоздким или неуместным. Рукописные примечания в Silverlight обеспечивают поддержку сенсорных экранов, что позволяет создавать насыщенные Интернет-приложения с возможностью сенсорного ввода.
• Ввод посредством мыши Имитировать рукописный ввод, подобный вводу пером Планшетного ПК, можно с помощью мыши. Однако такой ввод будет иметь боле низкое разрешение по сравнению с использованием пера настоящего Планшетного ПК.

Пример рукописных примечаний в Silverlight

На сайте http://silverlight.net предлагается замечательный пример приложения, поддерживающего рукописные примечания. Это приложение для чтения книг можно найти по адресу http://silverlight.net/samples/1.0/Page-Turn/default.html и увидеть на рис. 11.14.

Данное приложение демонстрирует, как можно загружать источник данных и просматривать изображения и другие ресурсы, имитируя перелистывание страниц книги. Оно расширено возможностью введения рукописных примечаний, что позволяет комментировать изображения, и добавляемые комментарии остаются связанными с изображением. Пример страницы с комментарием показан на рис. 11.15.

Рис. 11.14. Пример PageTurn на Silverlight

Рис. 11.15. Комментирование изображения в Silverlight

Классы рукописного ввода в Silverlight для разработчиков на JavaScript

Поддержка рукописного ввода в Silverlight очень проста. Каждый раз при проведении устройством ввода по экрану формируется один или более объектов StylusPoint (Штрих стилуса). Эти объекты объединяются в коллекцию StylusPointCollection (Коллекция штрихов стилуса), которая формирует основу Stroke. Обводки собираются в коллекцию StrokeCollection (Коллекция обводок). Эта коллекция составляет список графических элементов, используемых для создания рукописного ввода, визуальное предоставление которого формирует InkPresenter. Итак, если взглянуть на рис. 11.15, буква "С" в слове COOL - это обводка, образованная рядом точек, объединенных в StrokeCollection. Обе буквы "О", буква "L", линия и точка в восклицательном знаке, и линии, образующие стрелку и круг, - все это обводки. Каждая из этих обводок является участником коллекции StrokeCollection в InkPresenter, и каждая из них образована объектами StylusPoint, входящими в состав коллекции StylusPointCollection соответствующей обводки. Каждый из этих типов предоставляет объектно-ориентированный интерфейс со свойствами и методами, обеспечивающими возможность их программирования. Рассмотрим основные типы и некоторые их свойства и методы.

Тип StrokeCollection

Объект InkPresenter имеет свойство Strokes типа StrokeCollection. Эта коллекция, в свою очередь, содержит все метаданные, необходимые для представления рукописного ввода пользователя.

Свойства StrokeCollection

При использовании JavaScript для программирования Silverlight, StrokeCollection предоставляет свойство Count (Количество), которое возвращает количество обводок, находящихся в коллекции в настоящий момент.

Методы StrokeCollection

StrokeCollection предоставляет следующие методы:

1. Add ( Добавить ) Позволяет добавлять новую обводку в коллекцию.
2. Clear ( Очистить ) Очищает коллекцию обводок, что приводит к немедленному повторному формированию визуального отображения (т.е. удалению рукописного фрагмента, созданного ранее).
3. GetBounds ( Получить границы ) Возвращает прямоугольник (в виде структуры Rect ), который представляет блок, ограничивающий обводки.
4. GetItem(индекс) ( Получить элемент ) Обеспечивает извлечение обводки, хранящейся под заданным индексом.
5. HitTest ( Проверка совпадения ) Если этот метод передается в StylusPointCollection, он возвращает подмножество обводок в StrokeCollection, которые пересекаются с данными штрихами.
6. Insert ( Вставить ) Аналогичен Add за исключением того,что позволяет вставлять новые обводки в коллекцию по заданному индексу.
7. Remove ( Удалить ) Обеспечивает удаление заданного элемента из StrokeCollection.
8. RemoveAt ( Удалить по ) Обеспечивает удаление элемента из StrokeCollection по заданному индексу.

Тип Stroke

Представленный в предыдущем разделе StrokeCollection - это коллекция объектов Stroke. Объект Stroke представляет коллекцию штрихов обводки; каждый штрих соответствует одному движению стилуса: стилус опускается (stylus-down), стилус перемещается (stylus-move), стилус поднимается (stylus-up). Эти объекты, в свою очередь, обладают собственным набором свойств и методов.

Свойства Stroke

Объект Stroke предоставляет следующие свойства:

• DrawingAttributes ( Атрибуты рисования ) Каждая обводка имеет собственную независимую высоту, ширину, цвет и цвет контура. Эти параметры задаются посредством типа DrawingAttributes. Чтобы использовать этот тип, создается экземпляр объекта DrawingAttributes, задаются значения свойств, и новый объект DrawingAttributes добавляется в обводку.
• StylusPoints ( Штрихи стилуса ) Это StylusPointCollection, содержащий коллекцию объектов StylusPoint, образующих обводку. StylusPoint обсуждается в следующем разделе.

Методы Stroke

Объект Stroke обладает следующими методами для работы с рукописным вводом:

• GetBounds Возвращает ограничивающий прямоугольник Stroke в виде структуры Rect.
• HitTest Если передать этот метод в StylusPointCollection и если какой-либо из этих штрихов пересекает Stroke, метод возвратит true; в противном случае, возвращается false.

Тип StylusPointCollection

Эта коллекция объединяет в себе объекты StylusPoint. Она используется для хранения штрихов стилуса для Stroke или, в некоторых случаях, может передаваться в такие методы, как HitTest, для выявления пересечения обводок.

Свойства StylusPointCollection

StylusPointCollection предоставляет свойство - Count, которое возвращает количество штрихов стилуса в данной коллекции.

Методы StylusPointCollection

Объект StylusPointCollection имеет следующие методы:

• Add Этот метод позволяет добавлять новый StylusPoint в конец коллекции.
• AddStylusPoints ( Добавить штрихи стилуса ) Этот метод позволяет добавлять существующий объект StylusPointCollection в конец данной коллекции.
• Clear Этот метод удаляет все объекты StylusPoint из коллекции.
• GetItem Этот метод получает заданный StylusPoint из коллекции. Используется со значением типа integer, представляющим индекс интересующего элемента, например, getItem(5 ).
• Insert Этот метод вставляет новый StylusPoint в коллекцию по заданному индексу.
• Remove Этот метод удаляет заданный StylusPoint из коллекции.
• RemoveAt Этот метод удаляет из коллекции StylusPoint по заданному индексу.

Тип StylusPoint

Тип StylusPoint представляет отдельный штрих, создаваемый, когда пользователь выполняет ввод с помощью устройства рукописного ввода: пера, мыши или сенсорного экрана. Штрих предоставляет ряд свойств и методов.

Свойства StylusPoint

StylusPoint предоставляет следующие свойства:

• Свойство Name позволяет задавать имя штриха. Это уникальный идентификатор. Когда штрихи формируются в процессе ввода пользователем, имена им не присваиваются.
• Свойство PressureFactor (Коэффициент нажима) обозначает нажим, с которым пользователь водит пером или касается экрана при формировании штриха. При использовании мыши применяется нажим по умолчанию. Это значение типа double в диапазоне от 0.0 до 1.0, значение по умолчанию - 0,5. На основании коэффициента нажима можно менять высоту и ширину Stroke программно через свойство DrawingAttributes, чтобы предоставить обратную связь пользователю.

Координаты обводки можно получить с помощью свойств X и Y. Они измеряются в пикселах.

Аргументы событий мыши и рукописный ввод

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

Объект MouseEventArgs содержит методы, которые позволяют запрашивать сведения об устройстве ввода (является ли оно мышью, стилусом или каким-то другим устройством) и коллекцию объектов StylusPoint, связанную с этим событием.

Обратите внимание, что это тот же объект MouseEventArgs, который используется с событиями Mou-seEnter, MouseLeave, MouseLeftButtonDown, MouseLeftButtonUp и MouseMove.

Свойства MouseEventArgs

Объект MouseEventArgs предоставляет следующие свойства Булевого типа: ctrl и shift. Они принимают значение true, если пользователь удерживает соответствующую клавишу при формировании события.

Методы MouseEventArgs

Объект MouseEventArgs предоставляет следующие методы:

• Метод GetPosition (Получить положение) принимает в качестве параметра элемент и возвращает объект Point, который представляет координаты х и у курсора мыши относительно этого элемента. Если вызов метода осуществляется без параметра, Point содержит координаты относительно положения элемента управления, сформировавшего событие.
• Метод GetStylusInfo (Получить сведения о стилусе) возвращает объект StylusInfo (Сведения о стилусе), содержащий информацию о состоянии стилуса. StylusInfo имеет следующие свойства: 1.
  1. IsInverted (Инвертированный):Если перо инвертировано, это указывает на то, что пользователь хочет использовать его для удаления штрихов, а не для их отрисовки. Это свойство возвращает true в этом случае. 2.
  2. DeviceType (Тип устройства):Возвращает строку, содержащую тип устройства -"Mouse", "Stylus" или "Touch".
• Метод GetStylusPoints возвращает копию штрихов стилуса, добавленных в коллекцию с момента формирования последнего события мыши. Это будет объект типа StylusPointCollection.