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

14 августа, 2008
Raphael JavaScript logo

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Raphael example screenshot

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

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

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

До встречи!

Понравилась статья? Подписывайтесь на продолжение rss link !

Или на мой твиттер twitter link

]]>

Добавьте эту страницу в google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru

]]>

Опубликовано в JavaScript, Web разработка Комментарии (6) »

]]>

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

Вы можете отслеживать обсуждение записи с помощью RSS 2.0 rss link

Вы также можете оставить комментарий, или трекбек с Вашего сайта.

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

  2. StayeR

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

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

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

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

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

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

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

]]>

Оставить комментарий

* - обязательные для заполнения поля

]]>