Существует удобный формат для работы с векторной графикой в вебе — SVG. Если бы полная поддержка его всеми браузерами, завоевал бы он большую популярность, чем есть сейчас.
Но мы в своем фреймворке Mozart можем активно его использовать, не глядя на все проблемы совместимости. Фишка в том, что средствами фреймворка мы можем транскодировать один поток данных в другой. В случае с SVG мы трансформируем его в изображение JPEG, GIF или PNG формата, который и отдаем клиенту (браузеру).
Делаем мы это при помощи Java-based (как и сам Mozart) Batik SVG Toolkit.
Поглядим пример. Недавно запустили сайт одного агентства недвижимости, на котором было необходимо показывать план этажей в продаваемых объектах недвижимости с раскрашенными квартирными блоками. Разные квартиры имели разные цвета, уже купленные квартиры никак не должны оформляться вообще. Страница, где можно увидеть пример: http://www.monarch-realty.ru/floor/81/774/154/145#content
На входе у нас есть схема этажа, конвертированная из векторного редактора в SVG-формат (это умеет делать почти любой векторный редактор). Каждая квартира имеет подложку в виде замкнутого полигона, который мы можем залить (по умолчанию он без заливки), поменяв лишь цвет в одном месте SVG-файла.
Методом простых трансформаций (в Mozart это можно сделать как через XSLT, так и на уровне API через java, groovy или даже javascript) при выводе каждой картинки-схемы этажа мы сопоставляем данные по квартирам в базе данных с пустым изображением этажа, закрашивая нужны блоки. Т.е. немного преобразовываем исходный SVG. Далее этот SVG трансформируется в изображение, которое кэшируется и отдается клиенту.
Все происходит динамически, т.е. при изменении данных в БД кэш сбрасывается, изображение перерисовывается при первом обращении.
Таким вот нехитрым способом мы используем по назначению SVG, не глядя на сложности поддержки формата в некоторых браузерах и другие проблемы.
Про Mozart можно почитать тут: http://www.mozartframework.ru
UPD: хочу пояснить суть такого решения. Ниже предложили варианты использовать чистый SVG и VML, применяя решения типа raphaeljs.com.
У нас исходными данными были PDF и ничего больше. Пришлось через векторные редакторы конвертить эти данные в SVG — каждая схема полачалась как огромное кол-во векторов, так уж нарисовано все. Занималось все это несколько МБ. Трансформировать все это в разные форматы, накладывая еще и какую-то динамику через JS — мучение для клиентов.
UPD2: что касается Flash, то, конечно, можно, но читайте первый UPD и возьмите в расчет необходимость иметь для такого решения еще и флэшера…
Но мы в своем фреймворке Mozart можем активно его использовать, не глядя на все проблемы совместимости. Фишка в том, что средствами фреймворка мы можем транскодировать один поток данных в другой. В случае с SVG мы трансформируем его в изображение JPEG, GIF или PNG формата, который и отдаем клиенту (браузеру).
Делаем мы это при помощи Java-based (как и сам Mozart) Batik SVG Toolkit.
Поглядим пример. Недавно запустили сайт одного агентства недвижимости, на котором было необходимо показывать план этажей в продаваемых объектах недвижимости с раскрашенными квартирными блоками. Разные квартиры имели разные цвета, уже купленные квартиры никак не должны оформляться вообще. Страница, где можно увидеть пример: http://www.monarch-realty.ru/floor/81/774/154/145#content
На входе у нас есть схема этажа, конвертированная из векторного редактора в SVG-формат (это умеет делать почти любой векторный редактор). Каждая квартира имеет подложку в виде замкнутого полигона, который мы можем залить (по умолчанию он без заливки), поменяв лишь цвет в одном месте SVG-файла.
Методом простых трансформаций (в Mozart это можно сделать как через XSLT, так и на уровне API через java, groovy или даже javascript) при выводе каждой картинки-схемы этажа мы сопоставляем данные по квартирам в базе данных с пустым изображением этажа, закрашивая нужны блоки. Т.е. немного преобразовываем исходный SVG. Далее этот SVG трансформируется в изображение, которое кэшируется и отдается клиенту.
Все происходит динамически, т.е. при изменении данных в БД кэш сбрасывается, изображение перерисовывается при первом обращении.
Таким вот нехитрым способом мы используем по назначению SVG, не глядя на сложности поддержки формата в некоторых браузерах и другие проблемы.
Про Mozart можно почитать тут: http://www.mozartframework.ru
UPD: хочу пояснить суть такого решения. Ниже предложили варианты использовать чистый SVG и VML, применяя решения типа raphaeljs.com.
У нас исходными данными были PDF и ничего больше. Пришлось через векторные редакторы конвертить эти данные в SVG — каждая схема полачалась как огромное кол-во векторов, так уж нарисовано все. Занималось все это несколько МБ. Трансформировать все это в разные форматы, накладывая еще и какую-то динамику через JS — мучение для клиентов.
UPD2: что касается Flash, то, конечно, можно, но читайте первый UPD и возьмите в расчет необходимость иметь для такого решения еще и флэшера…
