Paper.JS против JSXGraph для построения графиков: наше подробное сравнение и вердикт

В Ideas2IT мы любим пачкать руки, чтобы исследовать технологические стеки и то, что мы можем с ними сделать. Думайте об этом как о внутренних PoC, которые мы делаем все время для развлечения! Совсем недавно мы поймали себя на мысли, что Paper.JS можно использовать для построения графиков. Вот что мы узнали.

Что такое Paper.JS?

Paper.js — это среда сценариев векторной графики с открытым исходным кодом, которая работает поверх HTML5 Canvas. Вместо того, чтобы быть простой оболочкой Canvas, он предлагает гораздо больше:

  • График сцены/объектная модель документа для векторной графики: работает с вложенными слоями, группами, путями, составными путями, растрами, символами и т. д.
  • Обработка и рисование этих графических элементов автоматизированы и оптимизированы, что позволяет вам создавать или изменять свои элементы и стили и оставлять команды рисования Paper.js.
  • Хорошо продуманный и закаленный в боях интерфейс прикладного программирования (API).
  • PaperScript, простое расширение JavaScript, позволяет выполнять скрипты в определенной области, не загрязняя глобальную область, выполнение нескольких сценариев на странице в их отдельных изолированных областях при совместном использовании кода библиотеки и добавлении поддержки перегрузки операторов для любого объекта.
  • Есть веская причина для слова вектор в векторной графике. Paper.js относится к векторной математике как к первоклассному гражданину, максимально упрощая работу с векторами и геометрией благодаря своим основным типам, таким как Точка, Размер и Прямоугольник. Манипуляции с объектами Точка и Размер еще более упрощены в PaperScript, где с такими объектами возможны прямые математические операции с использованием обычного синтаксиса операторов, как если бы они были простыми числами.
  • Создавайте пути и манипулируйте их кривыми и сегментами очень удобными и тонкими способами.
  • Проверяйте и управляйте точной ограничивающей рамкой любого элемента, поддерживая сложные стили обводки с различными концами обводки и ограничениями угла наклона.
  • Сглаживайте кривые и упрощайте сегменты пути, аппроксимируя кривые точками.
  • Имитация пунктирных штрихов, которых в настоящее время не хватает в объекте Canvas, с почти естественной скоростью рисования.
  • Большинство режимов наложения, известных из Illustrator и Photoshop, поддерживаются посредством эмуляции в JavaScript: умножение, экран, наложение, мягкий свет, жесткий свет, осветление цвета, затемнение цвета, затемнение, осветление, различие, исключение, оттенок, насыщенность, яркость. , цвет, сложение, вычитание, усреднение и отрицание.
  • Чтобы начать работу с Paper.js, проверьте это ›› http://paperjs.org/tutorials/getting-started/working-with-paper-js/

Что такое JSXGraph?

JSXGraph — это кроссбраузерная библиотека JavaScript для интерактивной геометрии, построения графиков функций, диаграмм и визуализации данных в веб-браузере. JSXGraph реализован на чистом JavaScript, не зависит ни от какой другой библиотеки и использует SVG, VML или холст. JSXGraph легко встраивается и занимает мало места: ок. 160 КБ, если встроено в веб-страницу. Никаких плагинов не требуется! Особое внимание было уделено оптимизации производительности. JSXGraph поддерживает мультитач-события и работает во всех основных браузерах, даже в очень старых IE. Чтобы попробовать JSXGraph, перейдите по этой ссылке ›› https://github.com/jsxgraph/jsxgraph

JSXGraph против Paper.js

Функциональность

JSXGraph может выполнять динамическую математику с помощью JavaScript. В то время как Paper.js предлагает множество мощных функций для создания и работы с векторной графикой и кривыми Безье.

UI-UX

JSXGraph — это имитация графической бумаги с взаимодействием.

Он содержит все математические методы для построения графика с точными значениями. Например: Параллельно, Перпендикулярно, Ось, Кривая и Эллипс.

Paper.js — это интерактивная имитация приложения Adobe Illustrator. В нем нет методов для сложных математических операций.

Функциональность

  • JSXGraph — хороший инструмент для построения сложных графиков.
  • Он содержит все математические методы для построения графика с точными значениями. Например: Параллельно, Перпендикулярно, Ось, Кривая и Эллипс.
  • Он не имеет сложных функций анимации или функций режимов наложения.

  • С другой стороны, Paper.js идеально подходит для 2D-иллюстраций с взаимодействием.
  • В нем нет методов для сложных математических операций.
  • Как и Adobe Illustrator, Paper.js содержит множество функций для векторов, таких как режим наложения, кривые и т. д.

Наш вердикт об их возможностях построения графиков

Обычно для построения графиков требуется технический стек для поддержки сложных математических операций.

В Paper.js система координат постоянно меняется. Это затрудняет точное построение графиков. Paper.js не имеет встроенных методов для многих операций.

В то время как JSXGraph кажется инструментом, созданным для этой цели.

Нравятся наши технические блоги?

Вот еще несколько для вас, чтобы много на.