Об одном подходе к построению графических изображений в среде Интернет браузера

 

О.Б. Арушанян, Н.А. Богомолов, А.Д. Ковалев, М.Н Синицын

 

 

Авторы в течение нескольких последних лет разрабатывают инструментальные программные средства для интерактивного отображения данных на картах в Интернет. Одним из подходов к решению этой задачи является построение графических изображений на сервере и передача их на клиентскую машину в виде растровых изображений. Другие подходы основаны на передаче на клиентскую машину минимума числовых данных и построении всех нужных изображений средствами Интернет браузера. К преимуществам подобных подходов следует отнести уменьшение объема передаваемых по сети данных, уменьшение нагрузки на сервер, уменьшение времени реакции приложения и повышение комфортности работы пользователя. Далее в сообщении кратко обсуждаются возможные способы построения графических изображений в среде Интернет браузера и предлагается новый подход, не использующий никаких дополнительных средств кроме стандартного HTML и JavaScript.

 

Функционально наиболее богатый подход состоит в использовании специализированных модулей, встраиваемых в Интернет браузер. Характерным примером могут служить Active-X элементы на платформе Windows. Этот подход может быть с успехом использован для построения интранет приложений. Широкому использованию этого подхода препятствует нежелание пользователей устанавливать на свои компьютеры 'незнакомые' программные компоненты.

 

Другой подход основан на использовании Java апплетов. Авторами был разработан Java апплет, обеспечивающий все необходимые графические примитивы нижнего уровня и элементы пользовательского интерфейса для построения интерактивных графических приложений. Подробное описание разработанного апплета и интерактивный электронный учебник по его использованию расположены на Интернет сайте Научно исследовательского вычислительного центра Московского Государственного университета (НИВЦ МГУ) ( http://www.srcc.msu.su/ ). Примером фрагмента сайта, построенного на основе использования этого апплета, может служить проект 'Региональная среда для инвестора' (http://www.economy.gov.ru/merit/reginvest/reginvest/RusSocEc/index.htm), созданный нашими коллегами с географического факультета МГУ и размещенный на официальном сайте министерства экономического развития и торговли (http://www.economy.gov.ru). Для использования Java апплетов характерно отсутствие развитых низкоуровневых графических средств (градиентные заливки, полупрозрачность, антиалиасинг, нетривиальный вывод текста) и некоторая непредсказуемость их работоспособности в неизвестном операционном окружении (сочетание типа и версии операционной системы, типа, версии и настроек браузера, типа и версии виртуальной Java машины).

 

Ряд подходов основан на использовании специализированных языков описания графических изображений: SVG, VML, Flash. Долгое время в Интернет отсутствовал общепризнанный стандарт представления двумерной векторной графики. В сентябре 2001 года консорциумом W3C был принят такой стандарт, получивший название SVG - Scalable Vector Graphics. Для описания документов SVG используется синтаксис XML, т.е. SVG документ является полноценным XML документом, и для его обработки могут использоваться любые средства работы с XML документами. Возможности описания векторных графических изображений, имеющиеся в SVG, сравнимы с возможностями таких развитых графических пакетов,  как CorelDraw и Adobe Illustrator.

 

Важной характеристикой стандарта SVG является то, что объектная модель SVG документа основана на принятом консорциумом W3C в 2000 году стандарте DOM (Document Object Model) Level-2. Это дает возможность использования стандартных языков для начального построения и произвольного манипулирования любыми элементами изображения. Составной частью стандарта SVG является модель событий, позволяющая привязать произвольный сценарий к любому фрагменту  SVG документа и достаточно легко реализовывать интерактивные графические изображения.

 

В настоящее время наибольшее распространение получил вьюер SVG, разработанный компанией Adobe. О планах развития SVG и имеющихся реализациях можно узнать на сайте консорциума W3C (http://www.w3.org/Graphics/SVG/) . К недостаткам использования SVG на сегодняшний день можно отнести его недостаточную распространенность и неполную поддержку уже принятых стандартов в имеющихся реализациях вьюеров.

Ближайшими конкурентами SVG можно назвать форматы VML и FLАSH.

 

Разработанный в Microsoft формат VML (Vector Markup Language) также основан на XML и близок по концепции и возможностям к SVG. Это формат был представлен консорциуму W3C для стандартизации, но был отвергнут в пользу SVG. VML используется для экспорта и импорта векторных графических изображений в MS Office и не поддерживается никем, кроме самой Microsoft.

 

Формат FLАSH в настоящее время более широко распространен в Интернет чем SVG, хотя SVG и обладает более широкими возможностями, в том числе и для создания анимированных изображений. Это обусловлено тем, что FLASH появился раньше, и тем, что для создания FLASH фильмов на рынке имеются развитые инструментальные средства. К недостаткам формата FLASH по сравнению с SVG следует отнести то, что FLASH не утвержден в качестве стандарта консорциумом W3C и обладает меньшими базовыми графическими возможностями. Кроме того,  встроенный во FLASH язык ActionScript, используемый для написания сценариев в интерактивных FLASH фильмах, меньше распространен и обладает существенно меньшими возможностями, чем  встроенный в SVG JavaScript.

 

Динамическое построение графических изображений в среде Интернет браузера можно осуществить и без привлечения описанных выше средств, используя только базовые возможности самого HTML и JavaScript. Техника построения изображения состоит в динамической генерации абсолютно позиционированных элементов <DIV> с заданным цветом фона. С помощью элементов <DIV> отображаются одноцветные прямоугольные области изображения. Этот способ динамического построения изображений имеет существенное ограничение - время построения такого изображения очень сильно зависит от количества составляющих его  прямоугольных элементов. Ниже приводятся результаты измерений времени  построения изображений для различного количества прямоугольных элементов:

 

Количество прямоугольников              500     1000   2000   4000   8000

Время построения для IE 6.0 (сек)       0.03     0.06    0.11    0.22    0.52

Время построения для NN 7.0 (сек)     0.08     0.16    0.45    1.27    5.65

 

Измерения выполнены на компьютере с процессором P4 2600 МГц. Приведенные результаты показывают, что наличие нескольких тысяч прямоугольных элементов изображения вполне приемлемо.

 

Хорошие результаты удается получить, при комбинировании динамически генерируемых прямоугольных элементов с растровым изображением. В этом случае отпадает необходимость динамического построения каждого пикселя, поскольку растровое изображение содержит неизменяемую часть картинки, а динамически генерируемые цветные прямоугольники доопределяют нужные элементы изображения. Это позволяет значительно сократить необходимое количество динамически генерируемых прямоугольных элементов изображения.

 

Подобная техника была использована авторами для динамического построения картограмм по векторам числовых данных. Картограмма строится на основании шаблона, состоящего из растрового изображения, и описания координат прямоугольных областей и их принадлежности к определенным объектам территории. Построение картограммы по вектору данных, каждый элемент которого соответствует некоторому объекту территории, осуществляется следующим образом. В начале для каждого элемента вектора  определяется цвет, которым соответствующий элемент будет отображаться на картограмме, затем по данным из шаблона осуществляется генерация цветных прямоугольных элементов изображения,  а затем поверх цветных прямоугольных фрагментов выводится статическое растровое изображение, содержащее прозрачные пиксели в тех областях, цвет которых должен изменяться динамически. Шаблон картограммы однократно передается на компьютер клиента. Таким образом, для построения новой картограммы на клиентский компьютер необходимо передать лишь новый вектор числовых данных.

 

 Приведем для примера некоторые количественные характеристики шаблона картограммы, которые удалось получить  для карты России размером 500 на 330 пикселей, на которой изображены 89 субъектов РФ. Динамическая часть изображения картограммы содержит около 80 тысяч пикселей. Оптимизированное количество прямоугольных областей изображения удалось довести до 720. Размер упакованного файла с координатами оптимизированных динамических прямоугольных областей составляет примерно 1.9 килобайта, а статическое растровое изображение шаблона имеет размер около 10 килобайт.

 

Авторами создано программное обеспечение Интернет клиента, реализующего предложенный подход и необходимые программные инструментальные средства вычисление координат динамических прямоугольных областей и оптимизации их количества. Доклад подготовлен при поддержке РФФИ, грант ? 02-07-90236.