5 октября 2008 в 11:26

Построение графики на javascript

dg
Raphaël — небольшая библиотека(20 килобайт) для построения векторной графики на веб-сайтах.

Она использует SVG и VML в качестве базы для создания графики. Учитывая то, что каждый созданный объект — DOM объект, то при помощи JavaScript обработчиков можно легко изменять их свойства и действия.

Так что связка Raphaël + jQuery будет давать огромные возможности для разработки.

По заверениям автора, библиотека работает во все основных браузерах: Firefox 3.0+, Safari 3.0+, Opera 9.5+ и Internet Explorer 6.0+, а так же от себя добавлю Chrome.

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

Очень советую вам посмотреть примеры вещей, которые можно сделать, ссылки на которые указаны ниже — это не оставит вас равнодушными ;-)

Посмотреть пример №1
Посмотреть пример №2
Посмотреть пример №3
Посмотреть пример №4
Оф. сайт Raphaël

Источник
Егор Дмитриевич @bO_oblik
карма
–32,0
рейтинг 0,0
Самое читаемое Разработка

Комментарии (58)

  • НЛО прилетело и опубликовало эту надпись здесь
  • +1
    2ой пример интересен
    • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        аналогично, версия 0.3.154
      • +1
        Вероятно, проблемы «ВебКита» — в «Сафари» та же проблема.
        • 0
          Точно, видимо проблемы веб-кита!
      • 0
        То же самое в Сафари для Windows 3.1
        • +11
          Windows 3.1 ?!
          • +2
            Хех:) Это называется «пишу, что думаю», в той же последовательности. Сначала вспомнил про Сафари, потом про то, что он для Windows, а только потом версию Сафари.
            Получилось забавное совпадение :)
            Имелось в виду, разумеется, Safari 3.1 для Windows.
      • 0
        Это глюк хрома, а если быть точне, то webkit.
    • 0
      грузится очень быстро!
  • +3
    Однозначно, большое спасибо! за SVG будущее если будут развиваться фреймвоки!
  • +1
    Красота! :))
  • +2
    весч! чую графики буду юзать
  • 0
    Это очень круто. Но нужно еще работать напильником, в Хроме отдельные места выглядят не очень.
    • +18
      над хромом тоже еще нужно поработать:)
  • –5
    в третьем примере к центру в ie7@vista-sp0 не гладко, глазик режет децл ;)
    • –1
      Децел режет глаз — бррр, ужасы какие!
  • +1
    Вот за это raphaeljs.com/analytics.html спасибо, буду использоваться обязательно. Добавил в избранное.
  • 0
    во всех примера, кроме 3, есть глюки =) Бразуер Хром.
    • 0
      Да, есть такое дело.
    • +1
      В хроме еще полно глюков, думется мне.
    • –2
      Минусовщики, я разве не прав?
      • +2
        Ты безусловно прав в том факте, что в Хроме с данными примерами какие-то проблемы. Но ты не прав в том, что это имеет хоть какое-то значение, потому что пока у хрома есть только бетта, и до первого релиза именно он подстраивается под современный веб, а не необорот.
  • +3
    Идея замечательная. Снимает нагрузку на сервер.
    • +2
      при построении графиков
  • +1
    Гламурненько так :)
  • +7
    Автор библиотеки присутствует на Хабре — DmitryBaranovskiy
    Так что не стесняемся, плюсуем :)
    • +2
      Угу, я тоже заметил что по всей видимости он наш соотечественник, но не знал, что он еще и на хабре.

      Плюсовать обязательно!
      • +2
        Давно и хорошо его знаю — действительно бывший наш соотечественник, живёт в Австралии.
        В частности, автор трансформатора микроформатов Optimus и просто идейный веб-стандартист ;)
    • 0
      Да, человек работает головой всем на благо — достойно уважения и плюса в карму :)
    • 0
      Спасибо, Вадим, только зачем же мне столько кармы?
      • 0
        Чтобы вытаскивать на главную ценные топики ;)
  • +1
    И вот еще для ознакомления — оч интересные плагины
    • 0
      Интересные, но грубоватые.
    • 0
      Page closed
      Seite gesperrt
      • +1
        линки внизу типа bevel.js — ведут на демки
        • 0
          Спасибо. Прикольная линка
  • 0
    Почему-то с самого начала не тормозит, но чем больше крутишь, чем медленее отрисовываются новые кадры. Опера 9,6
    • 0
      Странно. Но аналогичное и FF3
    • 0
      вы еще на загрузку цп гляньте :)
    • 0
      Я знаю почему. И даже знаю как это исправить, но пока руки не доходят.
  • НЛО прилетело и опубликовало эту надпись здесь
  • НЛО прилетело и опубликовало эту надпись здесь
  • +1
    Спасибо за то что знакомитте с новыми идеями)
    • 0
      Вообще-то идея достаточно стара: лет десять уже как SVG известен миру. Подобную ботву (интеркативные графики) мы делали еще в 2001 году, правда тогда SVG работал исключительно под IE5.
      • 0
        Я про библиотеку, раньше о ней не слышал, про SVG знаю))
      • +2
        ie5 не поддерживает svg. так же как и ie6, ie7, ie8… у них у всех VML свой собственный…
        • 0
          Да действительно память подводит уже) в 2001 году мы использовали Adobe SVG Viewer под IE, который позволял запрограммировать на JS интерактивное взаимодействие пользователя с SVG графикой. Пример тут www.itosweb.com/success/opera/main.html, правда не знаю, найдете ли вы Adobe SVG Viewer ;-)
          • 0
            Аналогично. Впервые серьёзно работал с SVG в 2000 году. С тех пор всегда хотел поработать ещё.
  • 0
    Странно, я был уверен, что читал об этом раньше на хабре. Воспользовался поиском и ничего не нашёл. Я ошибся или старые материалы начинают понемногу отсутствовать?
  • +1
    В поисках инфы как работать через js c svg был обнаружен plugin для jquery
    keith-wood.name/svg.html
    Поразбиравшись, было принято решение, создать более что-то более легкое, в стиле jquery.
    В результате была создана небольшая простая библиотечка для этого:
    habrahabr.ru/blogs/svg/37595/
    Raphaël — несомнено более мощный, к тому же кросплатформенный, за что авторам респект!
  • 0
    добавил в избранное, спасибо )
  • 0
    Супер-вещь, это знак, пора клепать свои штуки!
  • 0
    странно… а где же крики — вот она! замена флеш!
    • 0
      Это ты пошутил?
      Безусловно, красивые и полезные вещи можно делать с помощью Raphaël + jQuery, но как замена флеш, эти технологии не годятся(лично я не любитель флеш), они предназначены во-первых для совершенно других целей нежели флеш, во вторых, реализация достаточно простой анимации их использованием. значительно сложнее, нежели во флеш, разве не так?
      • 0
        >> они предназначены во-первых для совершенно других целей нежели флеш

        почему же для других целей? для тех же самых. (см. Flex)

        >> во вторых, реализация достаточно простой анимации их использованием. значительно сложнее, нежели во флеш, разве не так?

        если делать анимацию во флеше программно, то одинаково.

        на самом деле когда виртуальные машины javascript достигнут скоростей на которых работает avm2 (виртуальная машина для as3) и в браузерные стандарты введут поддержку прямых сокетных соединений, то флеш можно будет оставить как платформу для банеров.
  • 0
    Мой ноут (Pentium M 1300MHz) благополучно погиб на ротациях =)

Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.