Текущее состояние библиотек холста Javascript? [закрыто]

90

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

РЕДАКТИРОВАТЬ: Поскольку библиотеки постоянно меняются, и многие люди в последнее время приходят сюда за новостями и информацией о новых библиотеках, я изменил вопрос, чтобы он был более вневременным.

javascript html html5-canvas Ericbowden
источник
2
абсолютно. Я считаю, что варианты выглядят так: 2d-context -> KineticJS, fabric.js, paper.js или moodl.js. 3d-context (webgl) -> Three.js
Эрик Роуэлл
1
Вы можете проверить ссылку kangax на сравнение библиотек холста. Репост здесь docs.google.com/spreadsheet/…
ericbowden
4
Я удивлен, что этот вопрос еще не закрыт, так как почти все здесь закрывается. Я хочу ответить, но я слишком напуган (читай «напуган»), так как это может считаться не по теме. Возможно, если вы перефразируете вопрос как «в чем сходство / компромисс», я мог бы добавить свои два цента (читай «ответ»)
puk
4
Я чувствую себя так же, как @puk. Вдобавок я думаю, что семантический разрыв между тем, что по сути является просто «открытым», и тем, что помечено как «неконструктивное», забавно. Это примерно означает, что вопросы, на которые невозможно дать однозначный ответ, не заслуживают рассмотрения в самом популярном и всеобъемлющем хранилище знаний в области программирования. Я понимаю, что они не подходят для хорошего «Q + A», но почему бы просто не отметить их как «очень субъективные», ограничить количество повторений и оставить их открытыми… что-то.
Марк Фокс
1
Просто взвешиваю ТАК, что меня тоже очень раздражает постоянное закрытие полезных вопросов только потому, что они субъективны. И что!? Это чертовски полезная штука.
Iain Duncan

Ответы:

80

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

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

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

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

Кангакс
источник
ваше сравнение дает много информации, но ее общедоступное редактирование должно быть ограничено, потому что некоторые другие пользователи будут редактировать их по ошибке. Мне нужна помощь, kineticjs не поддерживает nodjs? и не могли бы вы привести один пример, например, программу рисования Windows (рисование окружности объекта на вашей ткани)
Тирумалай муруган
это не публично редактируется
kangax
1
Так повезло, что я нашел этот пост! Раньше работал с Kinetic, но пока еще не созрел. Потом попробовал Мольберт, но он слишком тяжелый. Наконец-то перешел на Fabric, и это здорово!
MeLight
@kangax Извините за недоразумение, не могли бы вы привести мне один пример, например, программу рисования Windows (рисование круга объекта в реальном времени с вашей тканью)
Тирумалай муруган
@Thirumalaimurugan, держи: jsfiddle.net/fabricjs/nXmTC/1
kangax
66

РЕДАКТИРОВАТЬ: KineticJS больше не поддерживается.

Отказ от ответственности: я создал KineticJS

KineticJS на самом деле неплохо справляется. Вы можете найти исходный код на Github , где на данный момент его отметили 2180 человек.

Он может обрабатывать тысячи одновременных форм:

Стресс-тест для 10 000 перетаскиваний: http://www.html5canvastutorials.com/labs/html5-canvas-kineticjs-drag-and-drop-stress-test-with-1000-shapes/

10 000 фигур с всплывающими подсказками: http://www.html5canvastutorials.com/labs/html5-canvas-10000-shape-stress-test-with-kineticjs/

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

kangax: PS Отличная работа с fabric.js! Помимо KineticJS (конечно), две другие мои любимые библиотеки - ткань и бумага.

Эрик Роуэлл
источник
7
Просто посмотрел демонстрации, и производительность действительно выглядит потрясающе! Также рад слышать, что у вас есть модульные тесты. Я вижу, вы разрешаете создание нескольких слоев. Это мило. В ткани мы оптимизируем таким же образом, но только два слоя - один для выбора, один для рисования - и внутренний (пользователи не могут создавать больше). Как-то пропустил Kinetic при создании сравнительной таблицы библиотек. Мы должны это исправить :)
kangax 08
6
обновление: KineticJS теперь в github: github.com/ericdrowell/KineticJS
Эрик Роуэлл
7
Как KineticJS по сравнению с EaselJS? Когда что использовать?
geeky_monster 08
1
хотел бы отметить, что KineticJS также поддерживает SVG-векторы через форму Kinetic.Path
Эрик Роуэлл
2
@EricRowell Mate Мне нравится KineticJS, его скорость, брак с GSAP, но от чего у меня кружится голова, есть ли способ свободно преобразовывать объекты KineticJS, как в FabricJS? Вот ссылка на то, что я пытаюсь сказать: fabricjs.com/customization Я не хочу использовать FabricJs, поскольку он очень медленный, а его низкая производительность очевидна из различных модульных тестов. Я действительно с нетерпением жду возможности найти способ свободно преобразовывать объект в KineticJS, поскольку это значительно упростит жизнь. Спасибо, Praney
praneybehl
62

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

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

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

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

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

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

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

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

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

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

Джереми Бертон
источник
1
Спасибо за этот ответ, сэкономивший мне много времени. Я собираюсь выбрать Kinetic и надеюсь, что вы откроете для себя то, что уже сказали.
Bashevis
Я провел ненаучный пользовательский тест предоставленных демоверсий с перетаскиванием для указанных выше библиотек на iPad3 и Samsung Galaxy Tab2. KineticJS также оказался явным победителем, будучи более отзывчивым и более точным в позиционировании касаний.
Per Quested Aronsson
1
Я оцениваю оба, и на данный момент, если честно, fabricjs кажется более полным и хорошо документированным.
albanx 09
9
Джереми, я бы хотел узнать больше о несоответствиях API в Fabric. Я стараюсь сделать это как можно более интуитивно понятным, поэтому, если что-то все еще остается странным, я определенно хочу об этом позаботиться. Вы можете подать заявку или упомянуть об этом здесь? С января документация улучшалась, но все еще не так хорошо, как хотелось бы. Твердое мнение об интерактивности - я думаю, вы можете так сказать, хотя вы можете сделать довольно много настроек. Что именно вы хотели другого? Наконец, события указателя - не понимаю, что вы имеете в виду. Путь, безусловно, реальная форма: fabricjs.com/quadratic-curve
kangax
23

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

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

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

Bendangelo
источник
3
По состоянию на июль 2014 года это лучшая библиотека холста. Его отметили на Github 4 тыс. Человек, и он используется крупными компаниями и агентствами. pixijs.com/projects как Google.
Vennsoh