Який сучасний стан бібліотек та фреймворків JavaScript у полотні HTML? [зачинено]

Наразі я досліджую варіанти роботи з полотном у новому додатку HTML 5 і мені цікаво, який сучасний стан сучасних бібліотек та фреймворків JavaScript у HTML полотні?

Зокрема, чи існують рамки, які підтримують такі речі, необхідні для розвитку ігор - складна анімація, керування графічними сценами, обробка подій та взаємодія користувачів?

Також готові розглянути як комерційні, так і продукти з відкритим кодом.

Я працював над fabric.js - бібліотекою полотен, щоб допомогти саме в цьому - маніпулювати об'єктами на полотні, обробляючи події та взаємодії користувачів. Це ще не випущено, але подивіться просту демонстрацію попереднього перегляду .

Ви також можете бачити його в дії в цьому редакторі дизайну , для якого він був створений спочатку.

Редагувати: Проект тепер доступний на github (відкритий доступ під ліцензією MIT)

Для початку перевірте:

• Демо (простий і складний, з кодом, щоб показати, як вони зроблені)
• Презентація Fabric.js на FalsyValues (та ще одна на BK.js )
• Вікі в github (включаючи FAQ )
• Документація
• Група Google (задайте там будь-яке запитання)
• Fabric.js на Twitter (або короткі запитання через twitter)
• Вступ до Fabric.js: Частина 1 (стаття про ScriptJunkie)
• Вступ до Fabric.js: Частина 2 (стаття про ScriptJunkie)

Як тканина порівнюється з іншими бібліотеками полотна Javascript? Ось таблиця порівняння .

Я здивований, що ніхто не згадував WebGL та побудовані на ньому рамки. Я вважаю це високим у списку найсучаснішої для 3D-графіки, прискореної графічним процесором та складної анімації на HTML-полотні / javascript.

WebGL - це крос-платформний, безкоштовний веб-стандарт для графічного інтерфейсу 3D-графіки низького рівня, заснований на OpenGL ES 2.0, відкритий через елемент HTML5 Canvas як інтерфейси Модель об’єкта документа. ...

WebGL приносить 3D-модуль без додатків до Інтернету, реалізований прямо у браузері. Основні постачальники браузерів Apple (Safari), Google (Chrome), Mozilla (Firefox) та Opera (Opera) є членами робочої групи WebGL.

WebGL дуже міцний у підтримці графіки, прискореної графічним процесором. Ознайомтеся з цими демонстраціями шейдерів GLSL . :-) І див. ChemDoodle як приклад взаємодії з користувачем.

Я працюю над додатком, використовуючи рамку O3D Google , яка керує графіком сцени, і використовує WebGL для візуалізації (раніше використовувався власний плагін). O3D - це незавершене виробництво, і його документація не є повністю оновленою, але вона знаходиться в стадії активного розвитку, і там є кілька хороших демонстрацій . 3D-басейн може бути більшою частиною вашої алеї. Розробники Google дуже реагують на питання групи обговорень.

Існує ряд інших фреймворків, побудованих на WebGL; дивіться тут . Серед тих, хто згадує про розробку ігор та графіки сцен, є Copperlicht, SceneJS, X3DOM.

WebGL працює в останніх розробках, створених кількома браузерами , але не IE. Я використовував Firefox ("Minefield") і Chromium з хорошими результатами. Вам знадобиться одна з них для запуску вищезгаданих демонстраційних версій

Однак якщо ваші вимоги полягають у тому, що він не повинен мати залежності від полотна / js HTML 5, WebGL може бути не правильним вибором. Схоже, незабаром IE підтримає його .

Оновлення: після надання великого опору, MS вирішили підтримати WebGL в IE 11 .

tri.js , від mr. doob , це фантастичний 3d-движок для javascript, який включає в себе сценограми (як програмне забезпечення, так і версії для WebGL / апаратних прискорених програм), затінення, частинки, анімацію зі шкіри (я думаю) та освітлювальні ефекти. Перевірте це, він супер талановитий хлопець.

Додам, що для перегляду більшості демонстраційних версій вам потрібен найновіший Google Chrome або еквівалент. Один із моїх улюблених: http://mrdoob.github.com/three.js/examples/webgl_materials_cars.html

KineticJS - це нова бібліотека, яка може створювати та анімувати окремі "шари" на полотні для високої продуктивності.

http://www.kineticjs.com/

CAKE.js більше не підтримується, але є досить потужною основою - http://code.google.com/p/cakejs/

Демо тут - http://glimr.rubyforge.org/cake/canvas.html , http://glimr.rubyforge.org/cake/missle_fleet.html

Подивіться на processingjs рамки. Також майбутні версії 2.0 мають проект для роботи з полотном

Рафаель здається досить гарною бібліотекою з полотнами; це на основі SVG (або на основі VML в Internet Explorer) і, таким чином, підтримує безліч подій користувачів. Він досить маленький (60 кбіт gzipped), тому не надто велика залежність.
Здається, він має і хороший твінер: http://raphaeljs.com/reference.html#animate ( приклади див. Тут і тут ).

Для прикладу того, що він може зробити, подивіться на цю розумну маленьку демонстрацію .

Сподіваюся, це допомагає!

Я виявив дві бібліотеки надзвичайно конкурентоспроможними і набагато кращими, ніж тканинні.

Kinetic.js і easel.js мають надзвичайно гарну обробку подій, групування та загальну абстракцію форми. Ви знайдете багато чого полюбити в обох; Мовляв, мольберт має більше орієнтації на зображення та фільтрацію.

Ручки подій Fabric набагато гірші за будь-який з цих - в основному він розглядає все полотно як один великий перетворювач подій і повідомляє вам, коли на щось натиснуто "Щось". Він не приєднує події до окремих фігур або груп фігур.

Існує цікава бібліотека, яка спрямована на вдосконалення деяких основ роботи з полотнім API під назвою canto.js Девіда Фланагана, автора Javascript: The Definitive Guide .

Крім того, молода, але непогана рамка Javascript, і це (складна анімація, керування графічними сценами, обробка подій та взаємодії з користувачем) все про нього - jCanvaScript . Може бути, за винятком "керування графіками сцен".

Працюючи з bHive для створення графіків та переміщення заголовків сайтів, здається вражаючим та потужним, на відміну від інших, здається, розробляється. Adobe Edge також вартий розсилки, хоча суворо не Canvas.

http://www.bhivecanvas.com

і

http://labs.adobe.com/technologies/edge/

Aves Engine справді чудово: http://www.dextrose.com/en/projects/aves-engine

Також Акіхабара здається гарною: http://www.kesiev.com/akihabara/

Якщо ви хочете використовувати Javascript, Dojo - це чудовий шлях. Він має компактний, багатопластовий (SVG, VML, Canvas, Silverlight) векторний графічний API, який є дуже потужним. Ви можете знайти його в dojo.gfx та dojox.gfx.

Ми використовували це для створення інтерактивного викладача з фізики, який дозволяє студентам малювати вектори, еліпси тощо (навіть додавати зображення) та виконувати на них всілякі перетворення. Ви можете побачити, що ми зробили на веб- сайті http://gideon.eas.asu.edu/web-UI/login.html - просто увійти з будь-яким ім'ям користувача.

Я подивився на fabric.js і dojox.drawing робить багато однакових речей. Якщо ви подивитеся на тести в наборі інструментів (як тільки ви отримаєте його dojox / малюнок / тести /), ви знайдете приклади всього, від векторної графіки до зображень до програмно створених тіней.

Я вражений Акіхабарою як ігровим двигуном. У ньому є фантастична документація у вигляді навчальних посібників та api. Я навіть бачив, як на деяких дошках оголошень говорили про випуск akihabara 2. На жаль, все, про що говорять, - приблизно один рік і більше. Я дуже сподіваюся, що цей двигун все ще розробляється.

Я щойно випустив першу ітерацію нової бібліотеки малювання та підрівнювання, спрямованої на людей із фоном розвитку AS3 / Flash. Поки моя війна ще не підтримує складних контурів малювання чи графіків, я сподіваюся, що це допоможе людям швидко намалювати та оживити основні примітиви звичним способом.

Відгуки та коментарі вітаються. http://www.quietless.com/kitchen/introducing-js3/