Работаем с изображениями на JavaScript: Raphael

Владимир | | JavaScript, Web разработка.

Raphael JavaScript logo

Сегодня я расскажу о небольшой JavaScript библиотеке, предназначенной для работы с изображениями. Называется она Raphael.

Основные возможности: создание графиков (диаграмм), небольших виджетов для обработки картинок, рисования закругленных уголков и т.п.

В качестве базы для создания изображений используются SVG и VML. Каждому объекту, созданному с помощью этой библиотеки, можно назначить обработчик. На данный момент поддерживаются следующие браузеры: Firefox 3.0+, Safari 3.0+, Opera 9.5+ и Internet Explorer 6.0+.

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

var paper = Raphael(0, 0, 100, 100);
var c = paper.circle(50, 50, 50);

В первой строке мы создали область для рисования, т.н. холст (canvas) размером 100 на 100 пикселов. И поместили его в левый верхний угол окна браузера (координаты х = 0, y = 0).

После этого – нарисовали на холсте окружность. Первый и второй параметры – координаты ее центра, третий параметр – радиус. Кстати, координаты окружности задаются относительно холста.

Теперь, используя переменную с, можно работать с окружностью. Например, залить зеленым цветом.

c.attr("fill", "#0f0");

Рассмотрим более интересный пример – отражение картинки.

Для этого создадим такую страницу:

<p>
<img id="leftArrow" src="back.png" height="80px" width="80px" alt="стрелка" />
</p>
<div id="mirror"></div>

Т.е. у нас есть картинка и блок mirror (в него будет вставлено отражение).

Теперь в заголовке страницы подключаем библиотеку и пишем функцию, которая будет создавать отражение.

<script src="raphael.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function() {
    var R = Raphael("mirror", 80, 80);
    var src = document.getElementById("leftArrow").src;
    R.image(src, 0, 0, 80, 80).matrix(1, 0, 0, -1, 0, 80);
};
</script>

Подключение библиотеки ничем не отличается от подключения обычного JavaScript файла (строка 1).

А функцию рассмотрим подробнее.

Сначала создаем холст (строка 4). В параметрах конструктора указаны:
1) id блока который будет контейнером для изображения;
2) длина блока (в пикселах);
3) высота блока (в пискелах).

После этого мы получаем имя файла картинки (строка 5).

Затем, с помощью функции image создаем изображение. В ее параметрах мы указываем название файла, x, y (координаты левого верхнего угла), width, height (длина, ширина).

На данном этапе наше изображение полностью идентично оригиналу.

С помощью функции matrix мы создаем отражение и смещаем его вниз.

Тут нужны некоторые пояснения. Параметры этой функции – это коэффициенты матрицы аффинных преобразований (а11, а12, а21, а22, dx, dy).

Подробно рассказать об этих преобразованиях в рамках статьи я, конечно, не смогу, поэтому поясню только общий принцип.

Такие матрицы преобразований позволяют описать изменения объекта вроде сдвига, поворота, масштабирования, растяжения, сжатия и перемещения.

Если у вас есть такая матрица, то вы просто умножаете координаты точек на нее и получаете координаты точек трансформированного объекта.

Результат выполнения функции показан на скриншоте.

Raphael example screenshot

Сверху находится оригинальное изображение, под ним — отражение.

Естественно, возможности библиотеки этим не ограничиваются. На официальном сайте показаны гораздо более эффектные примеры (этот и этот).

Пример с отражением вы можете скачать в виде архива.

До встречи!

  • Блин, это нереально круто. В частности как раз необходимо было решение с отражением (второй пример)

  • Блин, это нереально круто. В частности как раз необходимо было решение с отражением (второй пример)

  • Pingback: Социальная сеть для блоггеров sloger.net()

  • StayeR

    я разобрал как чертить линии
    а как линии произвольной ширины рисовать
    не пойму…
    прошу осветить этот вопрос

    • Метод path принимает массив с параметрами в которых можно указать толщину линии. Например,

      path({stroke: «#f00», «stroke-width»: 5})

      тут толщина равна 5px.

      Кстати, есть довольно подробная статья о рисовании линий с помощью этой библиотеки

  • StayeR

    я разобрал как чертить линии
    а как линии произвольной ширины рисовать
    не пойму…
    прошу осветить этот вопрос

    • Метод path принимает массив с параметрами в которых можно указать толщину линии. Например,

      path({stroke: «#f00», «stroke-width»: 5})

      тут толщина равна 5px.

      Кстати, есть довольно подробная статья о рисовании линий с помощью этой библиотеки

  • Здравствуйте.

    Не подскажите, как именно использовать матрицу для преобразований в matrix(). Например для перспективы с матрицей 3×3 это возможно?

    • Я дам вам ссылку.
      Насчет матрицы 3х3. Такие матрицы используются для преобразований 3-х мерных объектов. Я не уверен, что Raphael их поддерживает.

  • Здравствуйте.

    Не подскажите, как именно использовать матрицу для преобразований в matrix(). Например для перспективы с матрицей 3×3 это возможно?

    • Я дам вам ссылку.
      Насчет матрицы 3х3. Такие матрицы используются для преобразований 3-х мерных объектов. Я не уверен, что Raphael их поддерживает.

  • Rozumovsky

    Здравствуйте!
    А не подскажете, можно ли сохранить получившуюся картинку?
    Имеется вообще говоря контейнер, где хранится бинарная информация получившегося изображения?

  • Точно не отвечу. Контейнером является объект Raphael. Не, если я не ошибаюсь, в разных браузерах используются разные методы отрисовки изображения, и простого решения, скорее всего, нет.
    В самой библиотеки встроенного метода для этих целей нет.

  • Alex

    У меня IE8, и почему-то не отрабатывается .matrix
    Картинка копируется вниз, но не переворачивается (а в примере Reflection с сайта разработчика отражение мухи вообще не появляется).
    Может ли быть что данная часть не совместима с IE8? (следовательно у многих может не пойти)
    Никаких плагинов или дополнительных библиотек в моём IE нету (кроме Flash).

    • Похоже, так и есть. У меня тоже в IE8 отражение не работает.

  • operun

    Здравствуйте ,

    скажите пожалуйста почему не рисуется линия:

    var c = paper.path({stroke: «#036»}).moveTo(10, 10).curveTo(10, 15, 45, 45, 50, 50);
    или
    var c = paper.path({stroke: «#036»}).moveTo(10, 10).lineTo(50, 50);

    PS Объекты такие как круг, квадрат прорисовываются нормально.

    • А с какой версией raphael вы работаете?

      В версии 2.1 линия рисуется так:

      var paper = Raphael(10, 10, 110, 110);
      paper.path('M0 0 L100 100').attr({'stroke':'#f00'});

      Параметры метода path читаются так:

      (M)ove to (0; 0), (L)ine to (100; 100)

      Live example