GraphicsJS позволяет создавать любую веб-графику, которую вы можете себе представить

Пользовательские JavaScript API будущее Интернета. движение с открытым исходным кодом в сочетании с SVG графика взорвали возможности для веб-разработчиков.

GraphicsJS это бесплатная библиотека с открытым исходным кодом и JS API для создание пользовательской графики в веб-браузерах. Может использоваться как инструмент визуализации для отображения данных, или это может быть использовано для создания классных вещей просто чтобы похвастаться.

На домашней странице вы найдете большой раздел демонстраций созданный с GraphicsJS. И эти примеры просто царапают поверхность того, что возможно.

Библиотека использует свой собственный виртуальный DOM которая является абстракцией DOM браузера. Это несколько похож на виртуальный DOM React и он используется аналогичным образом.

Поскольку эта библиотека использует клон DOM, она также нужны настоящие элементы HTML работать на. Вот почему это использует SVG / VML а не встроенные объекты в холст HTML5.

Этот графический движок был изначально встроен в библиотеку AnyChart. Оттуда это было приспособленный а также с открытым исходным кодом в качестве собственного JS API.

GraphicsJS поддерживает все основные браузеры, даже начиная с IE6 и Chrome 1.0.

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

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

Если вы только начинаете, вы можете посетить детскую площадку Размещено на сайте AnyChart. Это хорошее место, чтобы найти образцы рабочего кода сломать синтаксис.

Или, если вы действительно хотите начать с квадрата один, то GraphicsJS, руководство по началу работы может помочь. Это больше похоже на “официальный” документация, так что он будет держать вас за руку более плавное обучение по сравнению с документами API.

В любом случае, мне нравится, что GraphicsJS был открыт и выпущен в сообщество разработчиков. Это далеко не идеальная библиотека, но это одна из лучших создание собственной графики SVG с нуля.

И чтобы ваши механизмы вращались, ниже вы можете увидеть пример того, что вы можете построить с Graphics.js.