воскресенье, 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

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

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

6 комментариев:

  1. Спасибо за информацию,очень интерсно

    ОтветитьУдалить
  2. Очень удобно

    ОтветитьУдалить
  3. Спасибо, нужная вещь! Один только вопрос. Как сохранить VML? при нажатии на Save отображается только SVG

    ОтветитьУдалить
  4. Еще было бы неплохо если бы можно было сохранять Raphael код

    ОтветитьУдалить
  5. Спасибо за замечания. В VML, вроде, сохранялось. Надо перепроверить, сейчас винды нет под рукой.
    Насчет Raphael кода - интересная идея, но я забил на поддержку редактора, сразу как его сделал :) Так что врятли..

    ОтветитьУдалить
  6. С возможностями Raphael можно создавать вещи совершенно не реализуемые при помощи обычного HTML/CSS

    ОтветитьУдалить