Raphaël

    Привет, Хабр


    В этом коротком очерке хотел бы рассказать о маленькой (по словам авторов) библиотеки на JavaScript — Raphaël. Данная библиотека использует для работы SVG и VML и служит, как не сложно догадаться для облегчения работы с векторная графикой в вебе.
    Так же по утверждению создателей работает во всех актуальных на даных момент браузерах, а именно Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+. К сожалению обошли создатели внимание вторую лису, хотя сюда по данным лайвинтернета на ней приходится почти 2% пользователей, что вообще немало. Да, и не смотря на то, что Хром не заявлен, в нем тоже все работает как часы.
    Вообще, на сайте библиотеки предельно понятным языком написано что она для чего она и как она. Но коротко остановимся на этом
    Для начала нам необходимо создать канвас объект (его мы привязываем к объекту DOM указывая ширину и высоту, или же указываем только координаты левого верхнего угла будущего объекта)

    // Each of the following examples create a canvas that is 320px wide by 200px high
    // Canvas is created at the viewport's 10,50 coordinate
    <br/>var paper = Raphael(10, 50, 320, 200);
    // Canvas is created at the top left corner of the #notepad element (or its top right corner in dir="rtl" elements)
    <br/>var paper = Raphael(document.getElementById("notepad"), 320, 200);
    // Same as above
    <br/>var paper = Raphael("notepad", 320, 200);


    * This source code was highlighted with Source Code Highlighter.


    Далее мы можем создавать любые графические примитивы, вызывая соответствующие методы объекта paper. Название методов одноименны с графическими примитивами которыми мы оперируем в рамках стандарта SVG (это например rect circle lineи т.д.) Вот например так создаем прямоугольник
    <br/>var paper = Raphael(document.getElementById("notepad"), 320, 200);
    paper.rect(0, 0, 640, 480, 10).attr({fill: "#fff", stroke: "none"});
    * This source code was highlighted with Source Code Highlighter.


    Не будем тут останавливатся на долго, об этом подробнейшим образом написано в документации.
    Не маловажным плюсов всего этого хозяйства явлется то, что с любым графическим элементом мы можем свзязать события, подобно тому как связываем их с любым DOM объектом, мне показалось это весьма полезным, учитывая что библиотека некоторое время шла бок о бок с фреймворком jquery, работы с элементами графика становилась практически тривиальной.
    Итого:Получаем кроссбраузерное решение вечного спора canvas с VML, возможность работать с элементами графики как с объектами DOM, и хорошую документацию библиотки (не смотря на то, что она на английском языке, все предельно ясно, хотя, думаю, если кто-то у кого с языками получше возьмется перевести — сообщество ему только спасибо скажет). Разработка получается действительно быстрой, вот например на написание этого (просто для примера и собственного изучения) ушло не более получаса.
    UPD
    <img title="" border=«0» alt="" src=«http://img15.imageshack.us/img15/1651/60319441.png»/ >
    А вот векторный дракон (из примеров на сайте) пример из области «вот так мы можем, но никогда так не делайте» браузер долго думал… (картинка-скрин, по клику векторная)
    UPD2 В хроме drag&drop работает криво

    Similar posts

    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More

    Comments 33

      +8
      Автор этого безобразия — Дима Барановский.
        +2
        Эх, не устаёшь повторять!)
          0
          Не знал (вернее копирайт внизу страницу видел, но не думал что все из хабралюдей =)).
            +2
            Дима был клёвым спецом ещё до Хабра.
            +1
            Яростно плюсую!
            0
            raphaeljs.com/analytics.html в Chrome 2.172.8 глючит очень
              0
              вот бы ещё там (http://raphaeljs.com/dragon.html) формочку сделать… что бы не спецы в js могли vml код забирать
              +8
              Как минимум третий раз на хабре.

              habrahabr.ru/search/?q=Rapha%C3%ABl
                +6
                Тоже вот хочу написать про то, как использовал это фреймворк в своем проекте. Пока проект в режиме закрытого бета-теста, поэтому показать нечего. Но кому будет интересно как создать интерактивный редактор-конструктор с применением векторной графики, драг-н-дропа и прочего, могу написать пару статеек.
                • UFO just landed and posted this here
                  • UFO just landed and posted this here
                    0
                    очень приятная библиотека, которую можно с умом использовать.

                    ps
                    демки на их оф сайте в Chrome только у меня глючат??
                      0
                      Chrome не поддерживается библиотекой.
                      0
                      К сожалению обошли создатели внимание вторую лису

                      2.0.0.20 дракон открылся, пример с «рисовать тут» тоже работает
                        0
                        вот вопрос: canvas и svg — это по сути одно и то же? В смысле ясно, что canvas это html5 тег а svg это векторная графика на XML
                        Но элементы там одинаковые или разные? Можно ли эти понятия смешивать?
                          +2
                          Совсем разные вещи.
                            0
                            Из тривиального вот это raphaeljs.com/playground.html будет работать и в IE а canvas не поддерживается оным, и не будет по ходу ;(.
                              0
                              code.google.com/p/iecanvas/

                              Реализует почти полностью canvas в ie.
                                –1
                                В разделе «Downloads» говорится:

                                — This project currently has no downloads.

                                И чё теперь?
                                  0
                                    0
                                    1 ссылка:
                                    sourceforge.net/projects/iecanvas
                                    This project allows you to embed Internet Explorer and Mozilla within your java program as a java canvas.

                                    И длл-ка на полтора метра внутри.
                                      0
                                      Хм. Прошу прощения, вы наверное и имели ввиду этот проект, потому что в описании первой ссылки сказано «An ActiveX implementation of HTML Canvas». Просто я реализация канвы на чистом JS с помошью VML. Сейчас попробую её найти.
                                        0
                                        * я видел реализацию на чистом JS

                                        А вот и она, кстати: code.google.com/p/explorercanvas/
                                          0
                                          О, я его имел ввиду, помню что две буквы какие-то и canvas.
                                0
                                CANVAS — тег, в который можно рисовать при помощи JS, SVG — XML-формат векторной графики, его можно создавать при помощи JS (а можно и готовый подключать).
                                  +2
                                  canvas:
                                  — заправски раздаешь команды, чтобы порисовать
                                  — все в пикселях, везде
                                  — direct rendering

                                  svg:
                                  — основано на «типа» графе сцены (DOM, которым можно управлять)
                                  — отрисовка происходит «сама по себе»
                                  — все векторное до последнего момента (блита на экран)
                                  — retained rendering

                                  > Но элементы там одинаковые или разные? Можно ли эти понятия смешивать?

                                  В целом, одинаковые понятия (porter-duff compositing, rasterization, 2D rendering), только представленные немного по-разному. Нижележая теория в общем одна и та же.
                                  0
                                  drag and drop demo
                                  Chrome 1.0.154.65
                                    0
                                    > и хорошую документацию библиотке (не смотря на то что на английском языке все предельно ясно, хотя
                                    > думаю если кто-то у кого с языками получше возьмется перевести сообщество ему только спасибо скажет)

                                    _ _ _И (_ _ _ _, _ _ _ _, _ _ _. _, _, _ _-_, _ _ _ _ _, _ _, _ _ _ _ _)
                                      0
                                      Поправил
                                        –1
                                        Ничего не поправил, до сих пор «не смотря на то что все ясно» и «возьмется перевести сообщество». Как вы собрались перевести сообщество, и где продолжение мысли «не смотря на то что все ясно»?
                                      –2
                                      Что мне не понравилось в этой библиотеке, так это ее «state oriented programming» и отсутствие некоторых очень важных фич (например, все координаты — относительно canvas, а относительно чего-то другого задать нельзя).

                                      Первое вроде можно поправить, а второе — как я понимаю, нельзя. Хотя, может быть, можно. :)
                                        0
                                        А вот если посмотреть на исходники библиотеки, то можно понять, что документация реализована всего где-то % на 40. А вот это плохо!

                                        Only users with full accounts can post comments. Log in, please.