воскресенье, 29 ноября 2009 г.

Векторный графический редактор в браузере на Raphael

SVG во всю набирает обороты и уже скоро сместит с пьедестала Flash. Не буду рассказывать о преимуществах, о этом можно прочитать в википедии.
На текущий момент у SVG есть один недостаток - нет поддержки в IE. У Microsoft собственный стандарт для векторной графики в браузере - VML.
Для решения этой проблемы разработана специальная библиотека Raphael, предоставляющая общий API для построения векторной графики, не зависимо от браузера.

В свою очередь я хочу представить графический редактор для построения векторной графики на основе RaphaelJS и чистоного SVG/VML.

Пример работы:
Opera (Firefox, Chrome, Safari - аналогично)
Internet Explorer
svg, raphael, canvas
Трансформация, поворот, масштабирование, закругление:
svg, raphael, canvas, Трансформация, поворот, масштабирование, закругление
svg, raphael, canvas

Попробовать демо редактора

Для просмотра списка возможностей читайте далее.
Возможности:
  • Вставка растровых изображений
  • Вставка линий
  • Вставка окружностей
  • Вставка эллипсов
  • Вставка прямоугольников
  • Вставка текста
  • Вставка и перемещение объектов на технологии Drag & Drop. Полное управление мышкой
  • Изменение приоритета видимости объекта. Перемещение на передний/Задний план
  • Контроль над списком объектов в диспетчере объектов (Objects). Выделенный объект обводится зеленой рамкой, объект в фокусе - синей
  • Изменение любых свойств объекта: окраска, прозрачность, обводка, размеры, положение, закругленность углов, поворот, трансформация, градиент. Изменение происходит в окне атрибутов (Attributes). Для изменения свойств объект необходимо выделить мышкой или в списке объектов
  • Удаление объектов и создание нового полотна
  • Изменение масштаба (+/-)
  • Сохранение сцены в svg или vml (Save)
Для работы нужен только браузер, для возможности вставки и открытия картинок нужен PHP

Как обычно я рад любым замечаниям и предложения. Будет отлично, если кого-то тоже заинтересует данное направление и мы совместно реализуем новую версию.

Исходные коды графического редактора.