Набрів на статтю з порівнянням трьох JS бібліотек для малювання в WEB Paper.js, Processing.js і Raphael.js. Думаю вона буде цікава не тільки мені.
Перш ніж почати малювати що-небудь в браузері, запитайте себе про наступних трьох речах:
- Вам потрібна підтримка старих браузерів?
Якщо відповідь так. тоді єдиний вибір, це Raphaël. Він підтримує браузери аж до IE 7 і Firefox 3. У Raphaël є навіть обмежена підтримка IE 6, незважаючи на те, що деякі базові для бібліотеки технології не можуть бути реалізовані в цьому браузері. - Вам потрібна підтримка Android?
Android не підтримує SVG, так що вам доведеться використовувати Paper.js або Processing.js. Існують чутки, що Android 4 буде підтримувати SVG, але більшість сучасних Android пристроїв вже не буде його підтримувати. - Ваш малюнок інтерактивний?
Raphaël і Paper.js зосереджені на взаємодії з мальованої елементами за допомогою кліка мишкою, перетягування і торкання. Processing.js не підтримує ніяких події рівня об'єкта, тому обробити руху користувача в ньому досить складно. Processing.js може малювати класну анімацію на Вашій домашній сторінці, а Raphaël і Paper.js більш підходять для інтерактивних додатків.
Paper.js, Processing.js і Raphaël на даний момент є лідируючими бібліотеками для малювання в Web. Також є пара новачків, чия популярність зростає, і звичайно Ви завжди можете використовувати Flash, але ця трійця добре працює з HTML5 і має найширшу підтримку серед виробників браузерів.
Весь код приведений в статті є Open Source і доступний на демонстраційній сторінці створеної спеціально для підтримки цієї статті.
загальні характеристики
Для початку імпортуємо кожну бібліотеку. У кожному разі цей процес дещо відрізняється
підключаємо Paper.js
Paper.js визначає тип скрипта як text / paperscript і ID цільового елемента canvas на якому ми будемо малювати.
підключаємо Processing.js
підключаємо Raphaël
Тепер ми готові малювати
Об'єктно-орієнтоване малювання
Обидва Paper.js і Raphaël використовують об'єктно-орієнтований підхід до процесу малювання: Ви малюєте коло і отримуєте об'єкт Коло. Processing.js просто малює коло і нічого не повертає. Наступний код ілюструє як це відбувається. Давайте почнемо з гуртка розмірами 100 на 100 по центру екрана.
Processing.js:
Кожен шматок коду малює один і той же коло. Різниця в тому, що Ви можете потім з ним зробити.
Paper.js створює коло як path об'єкт. Ми можемо зберегти його і змінити в подальшому. У Paper.js, circle.fillColor = 'red'; малює червоним кольором коло, а circle.scale (2) робить його в два рази більше.
Raphaël як і Paper.js 'реалізує об'єктно-орієнтовану модель. У Raphaël, ми можемо змінити колір нашого кола використовуючи circle.attr ( 'fill', 'red'); і змінити його розміри написавши circle.scale (2, 2) ;. Головна ідея полягає в тому, що коло, це об'єкт до властивостей якого ми можемо отримати доступ пізніше.
Processing.js не використовує об'єктів; функція ellipse () не повертає значення. Як тільки ми намалювали коло використовуючи Processing.js, він стає частиною створюваного зображення, як при звичайному малюванні чорнилом по папері; це ні якийсь окремий об'єкт, якому можна змінити властивості. Для зміни кольору ми повинні намалювати такий же коло, але іншого кольору поверх першого.
Коли ми викликаємо функцію fill (). змінюється колір для всіх примітивів відображаються далі. Після виклику функції translate () і fill (). всі фігури будуть зафарбовані зеленим.
Так як функції змінюють відразу все, ми легко можемо отримати зовсім несподівані ефекти. Викликаєш нешкідливу функцію і раптом все стає зеленим! Processing.js надає функції pushMatrix () і popMatrix () для ізоляції змін, але їх ще треба не забути викликати.
Відсутність об'єктів у Processing.js означає те, що складні малюнки обробляються значно швидше. Paper.js і Raphaël зберігають посилання на всі намальовані об'єкти, що збільшує колічествотребуемой пам'яті і на складній графіку помітно уповільнюють додаток. Processing.js не містить посилань на створювані об'єкти, в результаті кожна частина малюнка займає дуже мало пам'яті. Об'єктний підхід виправданий в разі, якщо Ви хочете отримати доступ до об'єкта пізніше, в іншому випадку це марна трата ресурсів. Paper.js дає можливість уникнути непотрібного витрати пам'яті там, де це не потрібно, для цього використовується Symbol який растеризуются об'єкт, але звичайно потрібно все спланувати заздалегідь щоб додаток працювало досить швидко.
Різні підходи визначають весь стиль роботи з бібліотеками. Звичайно це впливає і на те, як в них працювати з анімацією.
Змусимо їх рухатися
Обертання кіл не дуже видовищно, тому давайте нехай навколо кола крутиться квадрат.
Анімація в Processing.js
Processing.js підтримує анімацію використовуючи функції setup () і draw () функції, приблизно так:
Setup функція викликається в момент старту програми. Ми говоримо Processing.js з частотою 30 кадрів в секунду, в результаті наша функція draw () буде викликатися 30 раз в секунду. Це число може здатися високим, але це нормально якщо ми хочемо отримати плавну анімацію.
Функція draw () спочатку заливає весь полотно одним кольором; це зафарбувати все, що залишилося від попереднього кадру. Це головна особливість Processing.js: ми не маніпулюємо об'єктами, тому ми повинні очистити все, що залишилося з попереднього кадру.
Далі, ми переводимо фокус в точку 100,100. Це позиціонує отрисовку на 100 пікселів зліва і 100 пікселів від верху полотна для всіх операцій малювання, поки ми не змінимо координати. Далі ми змінюємо попереднє значення кута нахилу. Це значення збільшується з кожним кадром змушуючи квадрат обертатися. І останній крок, це відображення квадрата з використанням функцій fill і rect.
Зазвичай функція rotate () Processing.js оперує радіанами замість градусів. Тому ми кожен раз збільшуємо значення кута на 0.2, а не великої ваги, наприклад 3. Це один з багатьох випадків при програмному малюванні коли нам потрібна тригонометрія.
анімація Paper.js
У Paper.js просту анімація реалізувати простіше, ніж в Processing.js, використовуючи постійний об'єкт rectangle:
Ми використовуємо стан нашого квадрата у вигляді об'єкта, і Paper.js управляє малюванням на екрані. З кожним кадром ми обертаємо його потроху. Paper.js управляє всіма трансформаціями, тому ми не повинні перемальовувати все в ручну на початку кожного кадру або стежити за поточним значенням кута повороту або турбується про те, щоб не зачепити інші об'єкти.
анімація Raphaël
Raphaël схожий на Paper.js в своєму об'єктно-орієнтованому підході. У нас є квадрат, і ми викликаємо його метод rotate (). Таким чином ми можемо обертати квадрат використовуючи всього кілька рядків коду.
взаємодія
Взаємодія в Raphaël
Взаємодія в Paper.js
Paper.js йде іншим шляхом для обслуговування задач взаємодії, але і він досить простий:
Взаємодія в Processing.js
У Processing.js виявлення кліка мишки досить заплутано. Об'єктний стиль не підтримується, так-що ми повинні розраховувати в основному на свої власні сили.
Як тільки Processing.js отрісовиваєт квадрат, він забуває про нього. Ми хочемо, щоб при кліці на квадрат він міняв свій колір, але скрипт цього не знає, тому ми повинні робити все обчислення самі. Функція draw () визначає позицію курсора і вираховує лежить-ли він в межах нашого квадрата.
Для одного квадрата код не такий вже і страшний, але наприклад для кола потрібно буде рахувати кожен раз ПR 2. А більш складні фігури, такі як овали, криві і складні форми потребують ще більше математики.
Ні явного переможця
Кожен фреймворк має свої переваги. Кожна бібліотека надає можливості для створення класних демок і ще більш класних додатків.
переваги Paper.js
Paper.js відмінно підходить для маніпулювання складними фігурами. Він може обертати, скручувати і трансформувати будь-який об'єкт сотнею різних методів. Це дає можливість модифікувати об'єкти використовуючи жести мишкою (gestures). Новий Google Music Tour. змушує кольорові лінії рухатися під музику, показуючи як ця бібліотека справляється зі складними змінами простих фігур.
Ще один вау-фактор в Paper.js це підтримка растрової графіки. Paper.js може повністю змінити способи, якими відображаються зображення - наприклад перетворюючи їх в спіралі або Кубікова полотна (Q * bert boards).
переваги Processing.js
Основна перевага Processing.js 'це його швидкість, яка дозволяє створювати складну анімацію навіть на слабких машинах. Тут є багато прикладів, також відмінний приклад плавності анімації на Processing.js використовується на сайті Ricardo Sánchez.
Розсікають воду хвости і плаваючі тіла риб виглядають дуже натурально. Processing.js дозволяє домогтися цього просто, використовуючи криві і настроюються анімації.
Processing.js також підтримує складні ефекти на елементах, такі як затінення, освітлення і 3-D трансформації. Якщо Ви хочете швидко створити складні анімації на канві, то Processing.js є найкращим вибором.
переваги Raphaël
Однією з кращих можливостей Raphaël є підтримка Internet Explorer 7 і 8. Якщо ваша заявка повинна підтримувати старі браузери, то Raphaël є єдиним вибором.
Ще однією важливою перевагою Raphaël є його суспільство. Raphaël старше ніж Paper.js і Processing.js і тому у нього було більше часу на створення галереї прикладів, туторіал і опису типових проблем і способів їх вирішення. У нього є вбудована підтримка easing. анімації трансформацій і обробників подій, яку ми бачили в інтерактивному прикладі; також у нього є власна бібліотека для створення графіків.
Також у Raphaël відмінний набір різноманітних інструментів.
Інструменти
Давайте створимо щось більш складне
Отже, ми розглянули кілька простих прикладів, познайомилися в перевагами і недоліками кожної платформи і зрозуміли, в якому випадку якась з них підходить краще. Кожна бібліотека має свої плюси і мінуси, але все-таки грунтуючись тільки на примітивних прикладах про них досить складно судити.
Для порівняння кожної бібліотеки були намальовані кілька шестерень. Кожна з яких складається з двох кіл, з набором зубців навколо зовнішнього кола.
Коли всі поверхні залиті одним кольором, фігура схожа на шестірню.
Шестерня буде трохи повертатися на кожному кадрі анімації. Основна шестерня буде задавати швидкість, а всі інші будуть обертатися залежно від неї. Шестерінки будуть розташовуватися, зчіплюватися і обертатися одна об одну грунтуючись на божевільному кількості тригонометрії. Розташуйте їх на одному полотні і Ви отримаєте складну систему шестерень.
Майбутнє малювання в Web
Ми граємося з кожною новою освоєної технологією: ми сподіваємося, що вона вирішить багато наших проблем і це окупить інвестиції в її вивчення. Технології набирають і втрачають популярність, але в цьому беруть участь багато факторів, наприклад підтримка виробників або вимоги бізнесу. Майбутнє нашої індустрії це частенько гра в здогади.
Сьогодні Flash виглядає не найкращою технологією для вивчення. У Flash є класні інструменти розробки, роки накопиченого досвіду розробки і велике суспільство, але навіть Adobe йде від нього.
З SVG схожа ситуація. Браузери його підтримують, але не приділяють занадто багато уваги.
Кожен виробник браузерів постійно працює над збільшенням швидкості відтворення canvas. для отримання можливості використання апаратної акселерації і кращої підтримки таких бібліотек як Paper.js і Processing.js. Всі мобільні браузери А-класу підтримують canvas. і їх розробники постійно працюють над поліпшенням якості цієї підтримки.