Текущее состояние библиотек холста Javascript?

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

EDIT: поскольку библиотеки меняются, и многие люди недавно приходят сюда для новостей и информации о новых библиотеках, я изменил вопрос, чтобы быть более вневременным.

ОТВЕТЫ

Ответ 1

Отказ от ответственности: я являюсь автором Fabric.js.

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

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

Я также поддерживаю эту таблицу сравнения различных библиотек холста, где вы можете увидеть, как недавно обновлялась библиотека, ее размер, поддержка IE < 9 или node.js и т.д.

Ответ 2

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: P.S. Удивительная работа с fabric.js! Помимо KineticJS (конечно), мои две другие любимые библиотеки - это ткань и бумага.

Ответ 3

Для недавних читателей, по состоянию на январь 2013 года, я оценил:

  • Кинетическая
  • Ткань
  • Бумага
  • Мольберт

Под "оценкой" я сделал больше, чем просто прочитал документы; Я создал прототип приложения.

Я начал с Fabric, потому что у него, казалось, было самое большое сообщество, и подумал, что это будет мое решение. Но я отказался от Fabric по следующим причинам:

  • странные и недокументированные несоответствия API, которые сжигали много времени без необходимости.
  • Непоследовательная поддержка указателей. В частности, Fabric не рассматривает "Путь" как истинный объект формы, который можно выбирать и наблюдать. Это не соответствовало моим потребностям, так как интерактивные пути являются основным требованием моего приложения.
  • за кулисами добавления переводов на холст для размещения объектов. Для меня Ткань пытается быть слишком умной в этом отношении, не будучи ясностью для разработчика, что она делает.
  • слишком сильное мнение о том, как работают, изменяют размер и поворачивают интерактивность. Во многих отношениях, это здорово, чтобы эта функциональность была встроена в структуру, но в моем случае я не соглашался с тем, как она была реализована, а это означало, что в любом случае необходимо было полностью реализовать ее.
  • разреженная документация - много случаев, когда документация метода имеет форму: "setX (Y) - установить X в Y": -)

Я взглянул на Бумагу и не зашел слишком далеко. Это казалось слишком тупым для меня, а также между слишком стульями IMO - это слишком большая часть библиотеки визуализации, чтобы быть простой объектной моделью Canvas, но недостаточно библиотеки визуализации, чтобы конкурировать с D3. Кроме того, документация снова не была особенно доступной.

Я думаю, что Мольберт, вероятно, имеет большой смысл, если у вас есть фон Flash/ActionScript, но я этого не делаю. Кроме того, это казалось чрезмерно ориентированным на игры для моих требований. Гвоздь в гроб снова был документацией - недостаточно и представлен в нестандартном формате.

Итак, я закончил работу с Kinetic, потому что:

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

Кинетика не идеальна никакими средствами, и было несколько раз, когда мне приходилось глубоко погружаться в исходный код, чтобы понять, что происходит на самом деле под обложками. Кроме того, я пропустил синтаксический анализ и вывод SVG Fabric.

Ответ 4

Я бы очень рекомендовал pixijs. Его высокопроизводительная холст-библиотека.

Pixi.js - это 2D-рендеринг webGL с бесшовным резервом холста, который позволяет ему работать во всех современных браузерах как на рабочем столе, так и на мобильных устройствах.

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