Перед тим як почати малювати щось в своєму браузері, задайте собі три питання:
- Чи потрібна підтримка старих браузерів? Якщо відповідь ТАК, вашим вибором буде Raphael.js. Він підтримується браузерами починаючи з 7 і 3. Деякі елементи графіки будуть працювати навіть в 6. Хоча ця бібліотека не підтримує технологій які надають такі бібліотеки ...
- Чи потрібна вам поддержкаAndroid пристроїв? Android не підтримує SVG графіки, тому вам доведеться використовувати Paper.js або Processing.js. Ходять чутки, що Android 4 підтримує обробку SVG, але більшість пристроїв працюють під старою версією Android.
- Чи потрібна вам інтерактивність? Raphael і Paper.js схильні на інтерактивність через кліки, перетягування і торкання. Processing.js не підтримує ніяких об'єктних подій, тому дії користувача буде складно відстежувати. Processing.js може малювати відмінну анімацію на головній сторінці, але для інтерактивних додатків краще використовувати інші засоби.
Вибір правильного фреймверка визначить успіх вашого проекту. У цій статті ми будемо оглядати переваги і недоліки кожної бібліотеки, тільки корисна інформація, яка дозволить зробити правильний вибір.
Код використаний в цій статті доступний на демо сторінці.
Огляд фреймверков для малювання
Вони всі підтримують FireFox, Opera, Chrome і Safari, але Internet Explorer виняток - Paper.js і Processing.js використовують тег canvas, який підтримується в IE9 і вище.
Починаємо з імпорту бібліотеки. Процес настройки кожної з них буде трохи відрізнятися.
Налаштування Paper.js
Paper.js зажадає тип скрипта text / paperscript і ID canvas тега, який ви будете використовувати.
Налаштування Processing.js
Налаштування Raphael
Тепер почнемо малювати.
Як Paper.js так і Raphael використовують об'єктно-орієнтоване малювання: ви можете намалювати коло і отримати об'єкт кола. Processing.js малює коло і нічого не повертає назад. Наступний приклад все роз'яснить. Давайте почнемо з кола в центрі екрану в точці 100, 100.
Raphaël:
Processing.js:
Кожен сниппет коду малює те саме коло. Різниця в тому, що ви можете з цим робити.
Paper.js створює коло як path об'єкт. Ми можемо використовувати цей об'єкт і змінити його пізніше. У Paper.js, circle.fillColor = 'red'; - робить наше коло червоним, і circle.scale (2) - збільшує коло в два рази.
Raphaël також об'єктно-орієнтована модель. Ми також можемо змінити колір кола за допомогою circle.attr ( 'fill', 'red') ;. також збільшити його в два рази за допомогою circle.scale (2, 2) ;. Головне, що наше коло залишається об'єктом, з яким ми можемо працювати пізніше.
Processing.js не використовує об'єкти. Функція ellipse нічого не повертає. Якщо ми вже намалювали коло в Processing.js, це вже частина сформованої картинки, як фарба на полотні. Це не окремий об'єкт, який може бути змінений за допомогою атрибутів. Щоб змінити колір, нам доведеться намалювати нове коло поверх колишнього.
Коли ми викликаємо fill. це змінює колір заливки для всіх об'єктів, які ми будемо малювати після. Після виклику translate і fill, кожна форма буде залита зеленим кольором.
Так як функції змінюють все, ми можемо отримати небажаний результат. Викликати функцію і все стане зеленим! Для цього існують pushMatrix і popMatrix функції, для ізоляції змін. Не забувайте їх викликати.
Якщо Processing.js НЕ об'єктно-орієнтована фреймверк, це не означає, що він гірше. Paper.js і Raphael містять настройки для всього що ви малюєте, тому використовують більше пам'яті, на більш складних анімаціях ваше додаток може гальмувати.
Processing.js містить мінімум налаштувань для малювання форм, тому використовує мінімум пам'яті.
Обертаючи коло ми нічого цікавого не побачимо, тому ми створимо квадрат навколо.
Анімація в Processing.js
Processing.js підтримує анімацію з попередньо встановленими настройками і функціями відтворення, як в прикладі:
Функція setup викликається один раз, при старті програми. Ми вказуємо frameRate (30). що означає, наша функція буде викликана 30 раз в секунду, для перемальовування зображення. Так буде створюватися анімація.
Функція draw починається з заливки фону canvas. Заливаємо все білим кольором, іншими словами очищаємо полотно. Як ви пам'ятаєте, тут ми не можемо маніпулювати об'єктами.
Далі ми встановлюємо систему координат 100, 100 за допомогою translate. Це означає, все що в квадраті 100 x 100 буде білим. Далі ми будемо обертати певний angle, який зростає з кожною отрисовкой, що створює враження анімації. Останній крок, намалювати квадрат за допомогою функцій fill і rect.
Функція rotate в Processing.js приймає радіани замість градусів. Тому ми збільшуємо на 0,2 с кожної отрисовкой фрейма.
Анімація в Paper.js
Paper.js робить створення простої анімації зручнішим способом ніж попередній фреймверк.
Ми визначаємо квадрат як об'єкт, і Paper.js буде малювати його на екран. При кожному оновленні фрейма, ми будемо трошки повертати його. Нам не потрібно перемальовувати його кожен раз і турбуватися за збереження інших об'єктів.
Анімація в Raphael
Raphael схожий з Paper.js, та ж об'єктна модель. Ми маємо квадрат, до якого викликаємо функцію rotate. Так ми можемо анімувати квадрат з мінімальними витратами коду.
Інтерактив в Raphael.js, Paper.js, Processing.js
Інтерактивність за допомогою Raphael
Функція click в Raphael працює так само, як і в jQuery. Ви можете додати її до будь-якої події. Коли ми отримали подія кліка, нам буде просто змінити колір квадрата. Raphael має більше функцій: перетягування, наведення і інші функції інтерактивності.
Інтерактивність за допомогою Paper.js
Paper.js управляє інтерактивністю різними способами, але всі вони прості і зрозумілі:
Paper.js взаємодіє з мишею за допомогою концепту «hit testing», який знаходить точку в якій встановлена миша і визначає які об'єкти лежать під цією точкою. За допомогою цього ми можемо «уточнювати», наскільки курсор повинен бути близько до квадрату, або що буде відбуватися в міру наближення до центру квадрата.
Інтерактивність за допомогою Processing.js
Processing.js визначає натискання миші за допомогою деяких пристосувань. Ця бібліотека не підтримує об'єктних моделей, тому доводиться пристосовуватися.
Після того, як Processing.js намалювала квадрат, вона тут же забула про нього. Якщо ми хочемо поміняти колір квадрата при натисканні миші, нам доведеться все вираховувати самим. Функція draw визначає позицію курсора, якщо він лежить в області квадрата, ми перемальовували на новий.
Цей код не настільки поганий для квадрата, але для кола і більш складних форм це неприйнятно.
Немає абсолютного переможця
Кожен фреймверк має свої переваги. Природно ми не можемо цього побачити на простих кружочках і квадратиках. Для цього потрібні серйозні проекти.
Багато прикладів графічних рішень можна знайти на офіційних сайтах:
Також варто враховувати можливості підключення спеціальних інструментів, для вирішення конкретних завдань. Таких як малювання графіків, спеціальних форм та інших. Більш докладно про інструменти можна дізнатися на самому сайті фреймверка.
Перед цим ми гралися з малюванням простих елементів. Тепер ми розширимо горизонти і побачимо, як проявить себе кожна бібліотека в більш складному завданні. Заодно і навчимося поєднувати форми і створювати комплексну анімацію.
Ми створимо шестерні, які складаються з двох кіл, з зубчиками по зовнішньому периметру.
Коли всі форми мають один колір, вони виглядають як одна шестерня.
Кожна шестерня буде трохи обертатися з кожним оновленням фрейма. Першою шестерні буде задана швидкість обертання, всі інші будуть обертатися відповідно першої.
Шестерні на Paper.js
Шестерні на Processing.js:
Шестерні на Raphaël:
На Raphael функція обертання працює по-іншому, на відміну від Paper.js і Processing.js. Raphael не підтримує обертання об'єктів навколо певної точки. Замість цього, зубчики шестерні малюються і перемальовувати навколо центру. Вони літають, замість обертання. Єдиним способом змусити шестерню обертатися, є створення єдиного об'єкта, як слід (path), але це займає більше часу на розробку, ніж мій спосіб.
Якщо хтось хоче подивитися, як це працює, клікніть на картинки, все це відкритий ресурс на GitHub.
На що покладатися? - майбутнє веб малювання
Заглиблюючись в кожну нову технологію, ми сподіваємося, що з неї буде вигода. Технології піднімаються і падають, у міру того, наскільки ними користуються.
Зараз, Flash виглядає як погана інвестиція. Flash має ряд гідних інструментів, ним користуються роками, але навіть Adobe йде від цієї технології.
SVG в тій же ситуації. Браузери підтримують його зараз, але він не отримує належної уваги.
Кожен браузерні вендор працює над швидкою обробкою canvas тега. Тому, на мій погляд, краще вибрати Paper.js або Processing.js. Всі мобільні пристрої також підтримують canvas, і їх розробники роблять все, щоб поліпшити це.