Сучасний стан бібліотек на платформі Javascript? [зачинено]

Я досліджував бібліотеки полотна HTML, і я зіткнувся з цим питанням. Який сучасний стан техніки в бібліотеках і фреймворках HTML-полотна HTML? що було запитано у 2010 р. Найкраща відповідь - Fabric.js Провівши ще кілька досліджень, я натрапив на http://www.html5canvastutorials.com/, де представлені навчальні посібники з KineticJs, які можуть похвалитися кількістю полотен для швидкості. Пізніше трохи більше досліджень виявило, що бібліотеки Canvas здаються повсюдно, коли справа стосується швидкості та можливостей. Який на сьогоднішній день бібліотеки та фреймворки JavaScript Canvas? Хтось вийшов на перше місце?

РЕДАГУВАТИ: Оскільки бібліотеки постійно змінюються, і останнім часом багато людей приїжджають сюди за новинами та інформацією про нові бібліотеки, я змінив питання на більш позачасове.

Застереження: Я автор Fabric.js .

Я б сказав, що Easel.js, Fabric.js та Paper.js є одними з найбільш використовуваних на даний момент. Я суджу за кількістю спостерігачів Github для кожного сховища, обсягом обговорень у їхніх групах Google і тим, як часто я чую про них, що використовуються як бібліотеки полотна в Twitter.

Це також ті, що мають більш-менш пристойну документацію, приклади / демонстраційні програми, дискусійні групи та модульні тести (стан тестування в більшості інших бібліотек полотна досить сумний).

Я також веду цю порівняльну таблицю різних бібліотек canvas , де ви можете побачити, як нещодавно була оновлена ​​бібліотека, її розмір, підтримка IE <9 або node.js тощо.

EDIT: KineticJS більше не підтримується активно.

Застереження: я створив KineticJS

KineticJS насправді справляється досить добре. Ви можете знайти вихідний код на Github , де на даний момент його зіркою займається 2180 людей.

Він може обробляти тисячі одночасних форм:

10000 стресових тестів на перетягування та падіння: http://www.html5canvastutorials.com/labs/html5-canvas-kineticjs-drag-and-drop-stress-test-with-1000-shapes/

10000 фігур із підказками: http://www.html5canvastutorials.com/labs/html5-canvas-10000-shape-stress-test-with-kineticjs/

Він має дуже хорошу підтримку подій, включаючи мобільні події, і має досить солідний набір 100-ти модульних тестів, тому кодова база відчуває себе досить солідно.

kangax: PS чудова робота з fabric.js! Крім KineticJS (звичайно), моїми двома улюбленими бібліотеками є тканина та папір.

Для останніх читачів, станом на січень 2013 року, я оцінив:

• Кінетична
• Тканина
• Папір
• Мольберт

"Оцінюючи", я не просто читав документи; Я створив прототип програми.

Я розпочав з Fabric, оскільки в ній, здається, найбільша спільнота, і думав, що це буде моє рішення. Але я відмовився від Fabric з наступних причин:

• дивні та недокументовані невідповідності API, які злили багато мого часу без потреби.
• суперечлива підтримка події вказівника. Зокрема, Fabric не вважає "Шлях" справжнім об'єктом фігури, який можна обирати та спостерігати. Це не відповідало моїм потребам, оскільки інтерактивні шляхи є основною вимогою мого додатка.
• закулісні доповнення перекладів на Полотно для розміщення об'єктів. Для мене Fabric намагається бути надто розумним у цьому плані, не розуміючи розробника, що він робить.
• занадто сильна думка про те, як працює переміщення, зміна розміру та обертання інтерактивності. Багато в чому чудово вбудувати цю функціональність у фреймворк, але, у моєму випадку, я не погодився із способом її реалізації, що означало, по суті, все одно її переобладнати.
• розріджена документація - партії тих випадків, коли документація методу має вигляд: "setX (Y) - встановіть X на Y" :-)

Я подивився на Папір і не зайшов занадто далеко. Мені це здалося надмірно тупим, а також потрапляє між занадто стуленими IMO - це занадто багато бібліотеки візуалізації, щоб бути простою об'єктною моделлю для Canvas, але недостатньо бібліотеки візуалізації, щоб конкурувати з D3. Плюс, документація знову не була особливо доступною.

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

Отже, я в кінцевому підсумку пішов із Kinetic, оскільки:

• справді багаті та зрозумілі підручники та приклади
• Функції API виконують те, що їх називають, і, в основному, можна здогадатися - швидша продуктивність, менша крива навчання
• достатньо чітко розуміє, що він робить, а що ні - він не такий багатий, як деякі інші, але це користь; він робить менше речей, але робить їх краще
• Шляхи - це першокласні фігури для громадян, як і будь-яка інша фігура, що було важливим для моїх вимог.

Kinetic не є досконалим будь-якими способами, і бувало кілька випадків, коли мені доводилось занурюватися глибоко у вихідний код, щоб з’ясувати, що насправді відбувається під ковдрами. Плюс, мені не вистачає розбору SVG та виведення Fabric.

Я настійно рекомендую pixijs. Це високопродуктивна бібліотека полотна.

Pixi.js - це 2D візуалізатор webGL з безшовним резервним полотном, що дозволяє йому працювати в усіх сучасних браузерах, як на настільних, так і на мобільних пристроях.

http://www.goodboydigital.com/pixi-js-is-out/