Raphael JS — это легкий и супер-сексуальный JavaScript-фреймворк, который позволяет рисовать векторную графику в вашем браузере! В этом уроке я познакомлю вас с некоторыми основными функциями рисования, взгляну на анимацию, предоставлю доступ к DOM и, наконец, завершу, создав крутой виджет для вашего сайта …
Учебное пособие
- Каркас : Рафаэль Дж.С.
- Версия : 1.0
- Сложность: от начального до среднего
- Расчетное время завершения: 30 минут
1. Начало настройки
Давайте начнем с загрузки фреймворка Raphael JS отсюда . В правом верхнем углу страницы вы увидите
сжатые и несжатые копии Raphael версии 1.0. Я бы порекомендовал вам взять себе копию несжатого источника на данный момент — это
Таким образом, вы можете взглянуть на источник и посмотреть, какие дополнительные преимущества вы можете получить в документации.
После загрузки загрузим простой HTML-документ index.htm и включим в него Raphael. Мы также включаем our_script.js , где
мы напишем наш собственный JavaScript, а в теле документа создадим div в минимальном стиле с идентификатором canvas_container , который будет действовать как
Контейнер для наших рисунков.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
|
<html>
<head>
<title>Raphael Play</title>
<script type=»text/javascript» src=»path/to/raphael.js»></script>
<script type=»text/javascript» src=»path/to/our_script.js»></script>
<style type=»text/css»>
#canvas_container {
width: 500px;
border: 1px solid #aaa;
}
</style>
</head>
<body>
<div id=»canvas_container»></div>
</body>
</html>
|
NB Первый стабильный выпуск версии 1.0 был доступен только 7 октября 2009 года, так что он довольно новый. Это делает одно очень важное изменение в пути
вы рисуете пути, поэтому, если вы используете более раннюю версию Raphael, обязательно обновите и ознакомьтесь с документацией по обеспечению обратной совместимости.
2. Создание нашего холста для рисования
Когда мы рисуем с Рафаэлем, мы делаем это на холсте . Этот холст, на который мы будем ссылаться в переменной «paper», создается с использованием
Рафаэль () объект. Мы всегда указываем ширину и высоту холста, но также можем указать а) абсолютную позицию
холст относительно области просмотра, или b) элемент ‘контейнер’, внутри которого рисуется холст.
|
1
2
|
var paper = new Raphael(x, y, width, height);
var paper = new Raphael(element, width, height);
|
Я обычно предпочитаю последний метод (б), так как мы обычно знаем, где наши дивы. В our_script.js давайте подождем загрузки DOM, а затем создадим 500 на 500 пикселей
холст внутри нашего элемента canvas_container :
|
1
2
3
|
window.onload = function() {
var paper = new Raphael(document.getElementById(‘canvas_container’), 500, 500);
}
|
Все наши методы рисования теперь будут привязаны к бумажной переменной.
3. Встроенные формы
Теперь, когда у нас есть холст, давайте нарисуем на нем несколько фигур. Начало координат , то есть точка x = 0, y = 0, находится в верхнем левом углу
наш холст. Это означает, что любые координаты x, y, которые мы указываем в наших методах, относятся к этой точке.
Прежде всего, круг . Измените our_script.js, чтобы он выглядел так:
|
1
2
3
4
|
window.onload = function() {
var paper = new Raphael(document.getElementById(‘canvas_container’), 500, 500);
var circle = paper.circle(100, 100, 80);
}
|
Это нарисует круг с радиусом 80 пикселей с центром в x = 100, y = 100. Мы можем нарисовать столько кругов, сколько захотим, и нам не нужно
ссылаться на них в переменной:
|
1
2
3
4
|
for(var i = 0; i < 5; i+=1) {
var multiplier = i*5;
paper.circle(250 + (2*multiplier), 100 + multiplier, 50 — multiplier);
}
|
Далее нарисуем прямоугольник . Мы делаем это с помощью метода rect (), который принимает в качестве параметров: координаты x и y верхнего левого угла прямоугольника и
желаемая ширина и высота прямоугольника.
|
1
|
var rectangle = paper.rect(200, 200, 250, 100);
|
Наконец, мы нарисуем эллипс . Его параметры такие же, как у круга, то есть x, y, радиус, за исключением того, что мы можем конкретно указать радиусы x и y.
|
1
|
var ellipse = paper.ellipse(200, 400, 100, 50);
|
Это нарисует эллипс с x-radius = 100, y-radius = 50 при x = 200, y = 400. Теперь наш файл our_script.js должен выглядеть следующим образом:
|
01
02
03
04
05
06
07
08
09
10
11
|
window.onload = function() {
var paper = new Raphael(document.getElementById(‘canvas_container’), 500, 500);
var circle = paper.circle(100, 100, 80);
for(var i = 0; i < 5; i+=1) {
var multiplier = i*5;
paper.circle(250 + (2*multiplier), 100 + multiplier, 50 — multiplier)
}
var rectangle = paper.rect(200, 200, 250, 100);
var ellipse = paper.ellipse(200, 400, 100, 50);
}
|
Если мы теперь откроем index.htm в нашем браузере, мы должны получить несколько рисунков фигур:
Пример здесь
4. Рисование контуров
Хотя встроенные фигуры удобны в использовании, именно траектории дают нам истинную гибкость рисования.
При рисовании контуров полезно думать о воображаемом курсоре или точке пера, прижатой к экрану. Когда мы создаем наш холст, курсор поворачивается к
верхний левый угол. Первое, что мы должны сделать, это
поднимите наш курсор или точку пера и переместите его в просторную область, в которой мы можем рисовать.
В качестве примера, давайте переместим наш курсор в центр нашего холста. То есть давайте переместим его на 250px в направлении x и переместим на 250px в направлении y.
Мы делаем это, используя так называемую строку пути .
Строка пути — это строка, состоящая из команд ‘action’ и числовых значений, соответствующих команде. Мы перемещаем наш курсор к x = 250, y = 250, используя следующее
строка:
|
1
|
«M 250 250»
|
«M» означает, что мы хотим двигаться без рисунка, и за ним следуют координаты x и y canvas.
Теперь, когда наш курсор находится там, где мы этого хотим, давайте нарисуем линию относительно этой точки, используя строчную команду «L», «l».
|
1
|
«M 250 250 l 0 -50»
|
Это нарисует линию вверх на 50 пикселей в направлении y. Давайте напишем строку пути, которая нарисует тетрис тетронимо:
|
1
|
«M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z»
|
Команда ‘z’ означает закрытие пути — она присоединится к строке, где бы мы ни находились, до точки, указанной в нашей начальной команде ‘M’.
Мы просим Рафаэля нарисовать этот путь, используя метод path (). Измените our_script.js, чтобы он выглядел так:
|
1
2
3
4
|
window.onload = function() {
var paper = new Raphael(document.getElementById(‘canvas_container’), 500, 500);
var tetronimo = paper.path(«M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z»);
}
|
Если вы загрузите index.htm , вы должны увидеть тетронимо, например:
Строки пути могут становиться невероятно (блестяще) сложными, используя команды кривой и дуги. Полный охват путей можно найти на
Страница спецификации SVG Path .
5. Атрибут Стиль
Наш тетрис тетронимо, хотя и замечательный, не очень эстетичен. Мы исправим это с помощью метода attr ().
Метод attr () принимает в качестве параметра объект, состоящий из различных пар свойство-значение. Поскольку мы сохранили ссылку на наше tetronimo в переменной tetronimo , мы можем взять эту переменную и добавить к ней метод attr (). Мы могли бы одинаково хорошо
Привязать метод attr () к методу path (), но пока что все будет в порядке. Я продемонстрирую использование attr () на примере:
|
1
2
3
4
5
6
|
window.onload = function() {
var paper = new Raphael(document.getElementById(‘canvas_container’), 500, 500);
var tetronimo = paper.path(«M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z»);
tetronimo.attr({fill: ‘#9cf’, stroke: ‘#ddd’, ‘stroke-width’: 5});
}
|
производит это:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
window.onload = function() {
var paper = new Raphael(document.getElementById(‘canvas_container’), 500, 500);
var tetronimo = paper.path(«M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z»);
tetronimo.attr(
{
gradient: ’90-#526c7a-#64a0c1′,
stroke: ‘#3b4449’,
‘stroke-width’: 10,
‘stroke-linejoin’: ’round’,
rotation: -90
}
);
}
|
производит это:
Документация на Raphael довольно обширна, когда дело доходит до метода attr ().
Поиграйте с различными комбинациями свойства-значение объекта.
6. Анимация
Метод animate () в Raphael действительно хорош. Это позволяет нам анимировать наши рисунки в стиле jQuery, анимируя
атрибуты, которые мы поставляем в течение некоторого периода времени с необязательным ослаблением.
Давайте повернем наш самый последний тетронимо на 360 градусов. Вращение
Атрибут является абсолютным, поэтому для этого нужно сделать один полный оборот и вернуть его в не повернутое состояние.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
window.onload = function() {
var paper = new Raphael(document.getElementById(‘canvas_container’), 500, 500);
var tetronimo = paper.path(«M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z»);
tetronimo.attr(
{
gradient: ’90-#526c7a-#64a0c1′,
stroke: ‘#3b4449’,
‘stroke-width’: 10,
‘stroke-linejoin’: ’round’,
rotation: -90
}
);
tetronimo.animate({rotation: 360}, 2000, ‘bounce’);
}
|
Анимация длится более 2 секунд (2000 миллисекунд), и ей сообщается, что переход в конечное состояние происходит с помощью «отскока».
Пример тут .
Мы также можем предоставить функцию обратного вызова в качестве аргумента. Эта функция обратного вызова вызывается после завершения анимации. Следующий пример
анимирует вращение и ширину хода тетронимо, а затем сбрасывает себя с помощью другой анимации в функции обратного вызова.
|
1
2
3
4
5
6
7
8
|
tetronimo.animate({rotation: 360, ‘stroke-width’: 1}, 2000, ‘bounce’, function() {
/* callback after original animation finishes */
this.animate({
rotation: -90,
stroke: ‘#3b4449’,
‘stroke-width’: 10
}, 1000);
});
|
Это ключевое слово ссылается на оригинальное tetronimo из функции обратного вызова.
Пример тут .
Анимационные Пути
Будучи немного фанатом кода, я редко когда-либо рисовал простые формы во Flash. Но мне нравилось играть с анимацией формы . Что ж,
Рафаэль каким-то образом эмулирует анимацию формы, указывая строку пути в методе animate ().
Другой tetronimo, Z tetronimo в Tetris, имеет следующую строку пути:
|
1
|
«M 250 250 l 0 -50 l -50 0 l 0 -50 l -100 0 l 0 50 l 50 0 l 0 50 z»
|
и это выглядит так:
Теперь, используя наше оригинальное tetronimo с минимальным стилем атрибутов, я собираюсь указать новую строку пути в нашем методе animate ().
|
01
02
03
04
05
06
07
08
09
10
|
tetronimo.attr(
{
stroke: ‘none’,
fill: ‘blue’
}
);
tetronimo.animate({
path: «M 250 250 l 0 -50 l -50 0 l 0 -50 l -100 0 l 0 50 l 50 0 l 0 50 z»
}, 5000, ‘elastic’);
|
Вы должны увидеть наше оригинальное превращение tetronimo в наше новое. Эффект становится еще более выраженным, если в качестве типа ослабления указать «эластичный».
Пример тут .
7. Дом Доступность
Если мы хотим получить доступ к нашим элементам как элементам DOM, мы можем сделать это с некоторой легкостью. Это благодаря свойству узла . Используя это, мы можем
добавьте обработчики событий к нашим чертежам, которые я покажу вам.
Давайте начнем с рисования круга в нашем файле our_script.js .
|
1
2
3
4
5
6
|
window.onload = function() {
var paper = new Raphael(document.getElementById(‘canvas_container’), 500, 500);
var circ = paper.circle(250, 250, 40);
circ.attr({fill: ‘#000’, stroke: ‘none’});
}
|
Теперь давайте добавим текст «Пока, круг!» так что его центральная точка находится в той же точке, что и наш центр круга.
|
1
2
|
var text = paper.text(250, 250, ‘Bye Bye Circle!’)
text.attr({opacity: 0, ‘font-size’: 12}).toBack();
|
Я установил непрозрачность на 0, чтобы она была изначально скрыта. Обратите внимание на цепочку метода toBack (). Это ставит текст позади всех других
элементы рисования холста (аналогично, toFront () переносит элементы в самый фронт нашего холста).
Теперь давайте добавим обработчик события mouseover к нашему кругу, используя свойство узла. Мы установим стиль курсора на «указатель».
|
1
2
3
|
circ.node.onmouseover = function() {
this.style.cursor = ‘pointer’;
}
|
На самом деле это устанавливает свойство style объекта <circle> в нашем документе. Наш документ выглядит так:
|
1
2
|
<circle cx=»250.5″ cy=»250.5″ r=»40″ fill=»#000000″ stroke=»none» style=»fill: #000000; stroke: none; cursor: pointer»>
</circle>
|
Теперь давайте наконец добавим обработчик событий onclick в наш круг:
|
1
2
3
4
5
6
|
circ.node.onclick = function() {
text.animate({opacity: 1}, 2000);
circ.animate({opacity: 0}, 2000, function() {
this.remove();
});
}
|
При щелчке по кругу текст, на который мы ссылаемся в переменном тексте , анимируется до полной непрозрачности в течение 2 секунд. Сам круг анимирован
до 0 непрозрачности за тот же период времени. Мы также включили функцию обратного вызова в метод анимации круга. Это удаляет
элемент круга из нашего документа после завершения анимации, поскольку круг имеет непрозрачность 0, он по-прежнему доступен для нажатия, пока не будет удален.
Пример тут .
8. Давайте создадим виджет
Наконец, давайте соберем то, что мы узнали, и создадим симпатичный маленький приборчик настроения. В основном, вы будете выбирать значение настроения между 1 и 5, 1 — «мусор» и
5, будучи «положительно маниакальным», и Рафаэль создаст хорошее представление об этом.
Посмотреть виджет здесь
Начните с изменения our_script.js, чтобы он выглядел так:
|
1
2
3
4
5
|
window.onload = function() {
var paper = new Raphael(document.getElementById(‘canvas_container’), 500, 500);
var circ = paper.circle(250, 250, 20).attr({fill: ‘#000’});
var mood_text = paper.text(250, 250, ‘My\nMood’).attr({fill: ‘#fff’});
}
|
Это создает круг радиуса 20px в центре нашего холста и текст сверху «My Mood». «Настроение» помещается на новую строку с помощью
‘\ П’.
Далее, давайте создадим некоторую пользовательскую информацию, соответствующую нашему настроению, и выберем, в каком мы настроении.
|
1
2
3
4
5
|
moods = [‘Rubbish’, ‘Not Good’, ‘OK’, ‘Smily’, ‘Positively Manic’];
colors = [‘#cc0000’, ‘#a97e22’, ‘#9f9136’, ‘#7c9a2d’, ‘#3a9a2d’];
//pick a mood between 1 and 5, 1 being rubbish and 5 being positively manic
var my_mood = 1;
|
Текстовое описание нашего настроения хранится в массиве, называемом «настроениями», а цвет, соответствующий этому настроению, сохраняется в массиве, называемом «цветами».
Выбранное настроение, значение от 1 до 5, сохраняется в переменной my_mood.
Теперь давайте создадим функцию с именем show_mood. При вызове эта функция будет отображать наши круги настроения (цветные круги) и текст, соответствующий этому настроению.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
|
function show_mood() {
for(var i = 0; i < my_mood; i+=1) {
(function(i) {
setTimeout(function() {
paper.circle(250, 250, 20).attr({
stroke: ‘none’,
fill: colors[my_mood — 1]
}).animate({translation: ‘0 ‘ + (-42 * (i+1))}, 2000, ‘bounce’).toBack();
}, 50*i);
})(i);
}
paper.text(250, 300, moods[my_mood — 1]).attr({fill: colors[my_mood — 1]});
mood_text.node.onclick = function() {
return false;
}
circ.node.onclick = function() {
return false;
}
}
|
В show_mood () у нас есть цикл, который повторяется столько раз, сколько значение my_mood. Внутри этого цикла находится самовыполняющаяся анонимная функция. Это необходимо для того, чтобы
у нас есть доступ к переменной i на каждом этапе итерации. Внутри самореализующейся функции мы создаем тайм-аут — каждые 50 * i секунд, круг
создается в точке нашего первоначального круга. Каждый круг затем переводится в течение 2 секунд в 0px по x и кратно -42px по y. Мы обязательно разместим
каждый последующий круг в конце холста. Обратите внимание, что круги заполнены в соответствии с цветом в массиве цветов, который определяется my_mood.
show_mood () также отвечает за отображение нашего настроенного текста, который использует my_mood для выбора соответствующего настроения из moods_array.
Затем show_mood () наконец избавляется от любых обработчиков событий onclick, назначенных исходному тексту, и окружности, которую мы поместили в центре холста. Это мешает
перерисовка кругов настроений.
Наконец, давайте назначим обработчики событий onclick для центрального круга и текста «My Mood». Я назначаю обработчики событий обоим элементам, чтобы щелкнуть
текст или кружок вызывают вызов show_mood ().
|
1
2
|
circ.node.onclick = show_mood;
mood_text.node.onclick = show_mood;
|
Вывод
Ну вот и все! Теперь у вас должна быть звуковая платформа, на которой можно основывать свои исследования в среде Raphael JS. Самое главное, я надеюсь
теперь вы хотите погрузиться в Raphael JS и придумать красивые браузерные рисунки и виджеты. Не забудьте подписаться на меня в Twitter и поделиться своими творениями.
- Подпишитесь на нас в Твиттере или подпишитесь на ленту Nettuts + RSS для ежедневных новостей и статей о веб-разработке.