Сегодня запустили крутую open-source библиотеку GraphicsJS - как вам?
 

Всем привет.

Мы сегодня запустили GraphicsJS – бесплатную open-source JavaScript библиотеку для рисования любой HTML5 графики и анимации. Она легкая и по количеству и качеству возможностей превосходит существующие в мире SVG/VML компоненты, включая Raphaël и Bonsai.

Основные фичи коротко:

• виртуальный DOM;
• свой движок для трансформаций;
• удобный лаконичный API с chaining;
• умная система слоев с z-индексом;
• возможность рисовать не только кривые Безье, но вообще любые линии, арки, всевозможные фигуры "из коробки";
• обширные возможности для работы с текстом (многострочные тексты, измерения и т.д.);
• поддержка легаси-браузеров (IE6+).

Рисовать можно легко всё, что угодно: картинки, инфографика, анимация и т.д. Мы изначально разрабатывали для себя и используем как графический движок в наших коммерческих библиотеках для визуализации данных AnyChart. Но это только один из вариантов использования, конечно.

А вам как? В общем, будем рады фидбэку от вас. Ответим на вопросы, если что.

1. в документации на сайте я вижу версии >=7.0.0, а в тегах на гитхабе 1.0.0
2. в бауэр зарегистрируйте

raphael.min.js 90,3kb

graphics 170kb

Да, это не много конфузит. 7.x это версия AnyChart, движки документации пока слиты. Мы над этим работаем)

Спасибо за совет, завтра же добавим в bower и npm

Большое количество функций и удобное API требуют жертв. К тому же Graphics собирается Closure Compiler в режиме Advanced optimization с включенным strict mode. Closure Compiler ориентирован на минимзацию размера в gzip,который для графикса составляет 54Kb.

До думаю со временем сожмем до 100Kb в чистом виде

Думаю, под легкостью в том числе понимается не только вес, но и легкость DOM-операций (то, что graphics умеет переходить в состояние suspended).

Так, например если мне нужна 1000 элементов в SVG, то большинство популярных нынче движков отрисуют их за 1000 изменений в DOM. Это тяжелая и долгая операция.

Graphics может сделать это одной пачкой, что, по замерам, в несколько раз быстрее:

stage.suspend();
for (var i = 0; i < 1000; i++) {
 var path = stage.path();
 //тут произвольные операции над path.
}
stage.resume(); //Significant performance boost.

В таком случае, чтобы исключить неоднозначность толкования, вероятно, следует пересмотреть формулировку.

Да, я понимаю о чем идет речь. Когда-то давно мне доводилось иметь дело с [mxGraph](https://jgraph.github.io/mxgraph/) и еще одной библиотекой, для работы с графами, кот. оперировала с канвасом (не помню название). Они имеют подобные механизмы.

Перфоманс -- это хорошо. Все любят перфоманс. Другое дело, что доки никто не читает и думать не хочет. В связи с чем, могу предложить вам идею реализации "перфоманса из коробки", как это сделано, например, в библиотеке Vue.js.
Идея проста:

for (var i = 0; i < 1000; i++) {
 var path = stage.path();
 //тут произвольные операции над path. (!) ТУТ собираем (пакуем) изменения
}

setImmediate(function() {
   // (!) А ТУТ применяем их
})

https://learn.javascript.ru/setimmed...immediate-func

В терминологии Vue.js -- это асинхронный рендеринг.

У вас к тому же есть уже все для этого:
---

Ну, и лично мне не понятно почему ваше решение должно выстрелить. Существует огромное количество хороших библиотек визуализации и анимации.

Хотя, пока писал этот абзац, лично для себя заметил, что: видимо ценность вашей библиотеки как раз в том, что она на стыке highcharts и Raphael/BonsaiJS.
Однако visjs умеет графы, диаграммы(2d,3d) и судя по всему с анимациями там тоже не плохо.

---

Это конечно хорошо знать на чем она основана, но мне важнее что она умеет! Напишите об этом в ключевом послании к аудитории =)