Бібліотека Raphaël була створена Дмитром Барановським. Демонстрація можливостей є на сайті бібліотеки. Мені дуже сподобалися полярні годинник. На цьому прикладі можна розглянути як використовується бібліотека.
Код досить складний для розбору з нальоту, але стає цілком зрозумілий, якщо розібрати основні методи, які були використані в прикладі.
Усередині елемента з id = "holder" в HTML документі створюється SVG-контейнер розміром 600x600 пікселів
Метод circle () створює коло з координатами центру в точці 300,300 і радіусом 100
Метод attr () дозволяє задавати різні атрибути для елементів, наприклад:
встановити білий (#fff) колір для кордону stroke
задати ширину лінії кордону stroke-width в 30 пікселів
Можна навіть створити новий атрибут, який буде деякою суперпозицией інших атрибутів, наприклад, атрибут tri. який формує фігуру прямого рівнобедреного трикутника за координатами x, y зі стороною a
Ну а тепер можна створити анімацію, що переміщається і розширюється трикутника.
Зазначимо фінальне значення атрибута (точка 200,200, сторона 50),
час анімації - 2сек,
тип анімації - elastic (нагадує різку пружину з
Щоб виконати будь-яку операцію над групою елементів, їх можна об'єднувати в набори і тоді операція над набором буде автоматично приводити до відповідних дій над усіма елементами в наборі
Створимо набір s. додамо в нього коло і квадрат, потім поставимо для всіх елементів в наборі червоний колір заливки
Більше інформації про можливості бібліотеки можна знайти в досить великій документації.
Можливості бібліотеки звичайно вражають уяву, але мені, наприклад, дуже не вистачало досить базової речі: елемента
P.S. Якщо хтось встиг помітити, я реалізував для блогу висновок статистики по відвідинам. де використовував бібліотеку Raphaël для відображення графіків. Мені завжди хотілося мати можливість буквально перегортати пальцем графік, щоб координати точок довантажувати автоматично і графік формувався прямо на льоту і це вдалося реалізувати. Анімація не дуже гладка, але, якщо пожертвувати прозорістю основи, можна формувати частину графіка за межами області графіка і м'яко виводити після закінчення відтворення.
Добридень!
У мене завдання, зробити інтерактивну карту. Я зробив її за допомогою описаної вами вище бібліотеки. Підкажіть, як мені розфарбувати різні елементи карти в різні кольори? І якщо можливо як зробити так, щоб карта визначала регіон користувача сайту і відповідний регіон підсвічували?
Заздалегідь вдячний за відповідь!
Добридень!
У мене реалізована інтерактивна карта, але вона не адаптивна, як зробити її адаптивної?