Сегодня я расскажу о небольшой 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).

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

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

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

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

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

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

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

До встречи!