Качаємо останню версію бібліотеки з офіційного сайту. Там же, доступна вся необхідна документація. Для роботи потрібен всього один файл. Підключимо його до сторінці
Після чого доступний об'єкт Raphael. За допомогою нього створюється полотно, на якому і будемо малювати. Ще нам знадобиться блок, з якого і будемо робити полотно.
Далі, всі маніпуляції проводяться з використанням змінної paper. Намалюємо коло на полотні
Де 100 і 200 це відносні піксельні координати всередині полотна, а 50 це радіус кола. Теж в пікселах.
В бібліотеці вже є ряд примітивів: circle, rect, text, ellipse.
при кліці на полотні, буде створений прямокутник із шириною 50 і заввишки 5 піксель.
Видаляти елемент з пано потрібно за допомогою методу remove
після такого прикладу в цю бібліотеку закохуєшся остаточно і безповоротно. Тепер малювати прямо в браузері це також просто, як заправка картриджів hp. підключив бібліотеку і готово.
І на закуску, зробимо те, чого немає в стандартних прикладах з документації - звичайний трикутник.
літери на M, L і z не випадкові. M - moveto, L- lineto, z - closepath. Тобто програмування на кшталт програмі Черепашка, ставимо перо в певний стан за допомогою параметра M, потім малюємо лінію L, і замикаємо фігуру через z. Якщо не зробити останню операцію, що не замкнути фігуру, то вийде лінія.
Можливості об'єктів Raphael легко розширюються, за допомогою системи схожою на jQuery, тільки набагато простіше.
Тоді приклад вище, можна буде написати трохи простіше
Як бачите все досить просто.
Нехай це був короткий пост, але інформація з нього була здобута з різних джерел і буде корисна для початкового ознайомлення. Бажаю вам і вашим проектам успіхів. До нових зустрічей.