Зміст
Лише нещодавно ми змогли розглянути JavaScript для графічних робіт, таких як малювання діаграм чи, можливо, навіть ігор HTML5. Покращені механізми JavaScript та постійно вдосконалювана підтримка браузера (зокрема робота, яка виконується в двигуні V8 Chrome) роблять JavaScript життєздатним варіантом для великої кількості графічних робіт. Сьогодні я розгляну п’ять бібліотек, покликаних допомогти вам у цій галузі, а також ті, що також полегшують роботу з елементом полотна HTML5.
Якщо ви не знайомі з елементом полотна, настійно рекомендую ознайомитися з ним перед використанням бібліотеки, щоб полегшити його. Знання того, як зробити щось важче, змусить вас писати кращий код, навіть коли ви користуєтесь бібліотекою. Ремі Шарп написав хороший вступ до HTML5 Doctor, який повинен розпочати роботу, а також посилання на інші ресурси після того, як ви пропрацюєте вступ.
D3.js
Перший - D3.js, який описує себе як "бібліотеку JavaScript для маніпулювання документами на основі даних". Деякі приклади дуже вражають; від карти Сполучених Штатів до детальних діаграм куль. D3 розроблений, щоб дозволити застосовувати керовані даними перетворення до документа. Він зазвичай використовується для візуалізації даних, і про це написано безліч підручників. D3 - це не спеціально бібліотека графіків, а, крім іншого, просто надає вам інструменти для створення графіків. У наведеному нижче прикладі показана стовпчаста діаграма з накопиченням.Не дивно, що бібліотеки виникли навколо D3, щоб полегшити створення графіків, найпопулярнішим з яких є NVD3, бібліотека, яка залежить від D3, що дозволяє дуже легко створювати складні графіки. Я радив би вам спочатку спробувати графікувати за допомогою D3, перш ніж спробувати бібліотеку, таку як NVD3. NVD3 чудовий, але створення графіків із чистим D3 дозволяє забезпечити більший ступінь налаштування і, звичайно, більше контролю.
БонсайJS
Далі йде BonsaiJS, графічна бібліотека JS, яка має вражаючі демо-версії, такі як робоча гра Pong та інтерактивна кругова діаграма. Бонсай відрізняється від D3 тим, що він не працює, взаємодіючи з HTML, це все робиться за допомогою JavaScript. Також чудовим у Bonsai є онлайн-редактор, який дозволяє легко пограти з Bonsai та негайно побачити результати. Хоча синтаксис D3 часто буде нагадувати щось більше схоже на jQuery з точки зору взаємодії з елементами, з бонсаєм ви створюєте елементи за допомогою JavaScript, а бонсай автоматично додає їх на сторінку для вас. І бонсай, і D3 дуже потужні, але підходять до речей дещо по-різному.
Рафаель
Рафаель - це невелика бібліотека, призначена для спрощення роботи з векторною графікою в Інтернеті. Це також дозволяє складати діаграми та візуалізації та роботи, малюючи елементи SVG. Одним плюсом Raphael є те, що він має кращу підтримку браузера, підтримуючи IE6 і вище, тоді як Bonsai та D3 не підтримують старіші версії Internet Explorer. Однак одним негативним для Рафаеля є те, що вихідний код востаннє оновлювався 11 місяців тому, тому він трохи застарів. Рафаель залишається надзвичайно здібною бібліотекою і, безумовно, вартий уваги. Одним з моїх улюблених демонстраційних роликів є Карта труби Бена Барнетта, яка відтворює знамениту лондонську метрополітену разом із Рафаелем, і справді демонструє силу бібліотеки (знімок екрана нижче).
Three.js
Three.js - це щось зовсім інше, ніж три бібліотеки, про які я вже говорив. Three.js використовується для створення 3D-графіки, часто через WebGL. Він здатний на неймовірні речі, такі як цей спортивний автомобіль (на фото нижче), але оскільки він ресурсомісткий і використовує WebGL, підтримка браузера зараз очевидно обмежена. Для ефективної роботи з Three.js вам знадобляться хороші знання тривимірної графіки. Однак є хороші підручники, включаючи гарне введення в бібліотеку. Three.js реалізує шейдери, камери, анімацію та завантажує більше.
МольбертJS
Якщо вам подобається бібліотека, яка виконує роль обгортки для роботи з елементом полотна, EaselJS може знаходитись на вашій вулиці, особливо якщо ви хочете побудувати деякі ігри. Він здатний відтворити класичну гру «Астероїди» або дозволити користувачам малювати на полотні. Мольберт постачається з вичерпною документацією щодо API. EaselJS знайшов багато натхнення для назв своїх класів у Flash, тому, якщо ви знайомі з Flash, вам буде легше підібрати Easel.
Що стосується вступних підручників, це відео на YouTube дає хороший вступ, а також є посилання у вікіслотковій версії на більше. Мольберт не схожий на D3 чи Bonsai - він чітко розроблений з урахуванням більшої взаємодії - ігор, інтерфейсів перетягування тощо, а не візуалізації даних. Також варто перевірити весь набір CreateJS, до якого належить мольберт. Сюди входять TweenJS, бібліотека для налаштування (або анімування) властивостей HTML5 та JavaScript, SoundJS для роботи зі звуком у JavaScript та PreloadJS, бібліотека для управління попереднім завантаженням активів. На скріншоті вище показано версію астероїдів EaselJS.
Підібравши правильний інструмент
Завдяки новій функціональності, доступній нам як розробникам JavaScript, випадки використання JavaScript постійно розширюються, і розробники користуються цим, створюючи ці бібліотеки, такі як п’ять згаданих раніше, щоб зробити це ще простішим. Деякі демонстраційні програми цих бібліотек, зокрема ThreeJS, абсолютно вражають; не так давно, що нічого з цього було неможливо.
Як і в інших статтях цієї серії "Найкращі JavaScript", я рекомендую вам спробувати кілька бібліотек, перш ніж зупинитися на одній, яка буде використана для вашої програми. У кожній бібліотеці є деякі речі, які вона робить добре, і, можливо, кілька слабких місць, і вибрати відповідну для роботи - це те, на що слід витратити час.
