Работаем с изображениями на JavaScript: Raphael
Сегодня я расскажу о небольшой 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).
Подробно рассказать об этих преобразованиях в рамках статьи я, конечно, не смогу, поэтому поясню только общий принцип.
Такие матрицы преобразований позволяют описать изменения объекта вроде сдвига, поворота, масштабирования, растяжения, сжатия и перемещения.
Если у вас есть такая матрица, то вы просто умножаете координаты точек на нее и получаете координаты точек трансформированного объекта.
Результат выполнения функции показан на скриншоте.
Сверху находится оригинальное изображение, под ним – отражение.
Естественно, возможности библиотеки этим не ограничиваются. На официальном сайте показаны гораздо более эффектные примеры (этот и этот).
Пример с отражением вы можете скачать в виде архива.
До встречи!
Понравилась статья? Подписывайтесь на продолжение 
!
Или на мой твиттер 
Добавьте эту страницу в 
Опубликовано в JavaScript, Web разработка Комментарии (6) »
Комментарии (6)
Вы можете отслеживать обсуждение записи с помощью RSS 2.0
Вы также можете оставить комментарий, или трекбек с Вашего сайта.
Блин, это нереально круто. В частности как раз необходимо было решение с отражением (второй пример)
я разобрал как чертить линии
а как линии произвольной ширины рисовать
не пойму…
прошу осветить этот вопрос
Метод path принимает массив с параметрами в которых можно указать толщину линии. Например,
path({stroke: "#f00", "stroke-width": 5})
тут толщина равна 5px.
Кстати, есть довольно подробная статья о рисовании линий с помощью этой библиотеки
Здравствуйте.
Не подскажите, как именно использовать матрицу для преобразований в matrix(). Например для перспективы с матрицей 3×3 это возможно?
Я дам вам ссылку.
Насчет матрицы 3х3. Такие матрицы используются для преобразований 3-х мерных объектов. Я не уверен, что Raphael их поддерживает.