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

[andreykh]

Всем привет.

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

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

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


http://www.anychart.com/blog/wp-content/uploads/2016/09/graphicsjs_main_700x645.jpg

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

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

[nerv_]

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

[nerv_]

Она легкая

raphael.min.js (https://github.com/DmitryBaranovskiy/raphael/blob/v2.2.1/raphael.min.js) 90,3kb

graphics (https://github.com/AnyChart/graphicsjs/blob/master/dist/graphics.min.js) 170kb

[roman_lubushkin]

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

2. в бауэр зарегистрируйте
Спасибо за совет, завтра же добавим в bower и npm

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

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

[langley]

raphael.min.js (https://github.com/DmitryBaranovskiy/raphael/blob/v2.2.1/raphael.min.js) 90,3kb

graphics (https://github.com/AnyChart/graphicsjs/blob/master/dist/graphics.min.js) 170kb

Думаю, под легкостью в том числе понимается не только вес, но и легкость 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.

[nerv_]

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

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

Перфоманс -- это хорошо. Все любят перфоманс. Другое дело, что доки никто не читает и думать не хочет (http://www.ozon.ru/context/detail/id/126944/). В связи с чем, могу предложить вам идею реализации "перфоманса из коробки", как это сделано, например, в библиотеке Vue.js.
Идея проста:

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

setImmediate(function() {
// (!) А ТУТ применяем их
})
https://learn.javascript.ru/setimmediate#метод-setimmediate-func

В терминологии Vue.js -- это асинхронный рендеринг (http://rc.vuejs.org/guide/reactivity.html#Async-Update-Queue).

У вас к тому же есть уже все для этого:
GraphicsJS has implements the Virtual DOM which makes drawing more robust and manageable.

---

Ну, и лично мне не понятно почему ваше решение должно выстрелить. Существует огромное (http://visjs.org/) количество (https://d3js.org/) хороших (http://www.highcharts.com/) библиотек (http://svgjs.com/) визуализации и анимации.

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

---

GraphicsJS
A lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology.
Это конечно хорошо знать на чем она основана, но мне важнее что она умеет! Напишите об этом в ключевом послании к аудитории =)