ng2-konva

Бесплатно
Открытый исходный код

Сайт: konvajs.org/docs/react/Angular.html

ng2-konva — это библиотека-обёртка для фреймворка Angular, предоставляющая набор декларативных и реактивных компонентов для работы с Konva, JavaScript-библиотекой для рисования на HTML5 Canvas. Проект предназначен для упрощения интеграции сцены Konva в архитектуру Angular-приложений: он оборачивает примитивы Konva (слои, группы, формы, текст, изображения и пр.) в Angular-компоненты, поддерживает привязку данных, событиевую обработку и управление жизненным циклом через стандартные механизмы Angular.

Исторически ng2-konva возник как решение для разработчиков, желающих использовать возможности 2D-рендеринга Konva внутри приложений на Angular без прямого манипулирования DOM и canvas API из компонентов. В случаях, когда официальной документации или подробных сведений о проекте недостаточно, общая функциональность и назначение понятны исходя из типичных обёрток: библиотека обеспечивает совместимость с реактивными формами и потоками данных, упрощает синхронизацию состояния графических объектов с моделью приложения и снижает объём низкоуровневого кода.

  • Декларативные компоненты: представление объектов Konva через Angular-компоненты и шаблоны для упрощённого описания сцены.
  • Двусторонняя привязка данных: синхронизация свойств элементов Konva с полями компонента Angular.
  • Поддержка событий: маршрутизация событий Konva (клики, перетаскивание, наведение) в обработчики Angular.
  • Жизненный цикл Angular: управление созданием и уничтожением объектов Konva в соответствии с жизненным циклом компонентов Angular.
  • Реактивность: совместимость с RxJS и возможность обновления сцены в ответ на потоки данных.
  • Сопоставление примитивов: компоненты для слоёв, групп, прямоугольников, окружностей, линий, сплайнов, текста и изображений.
  • Управление трансформациями: удобные средства для изменения положения, масштаба и поворота объектов в декларативном стиле.
  • Кастомизация и расширяемость: возможность создавать собственные обёртки и интегрировать нестандартные конфигурации Konva.
  • Производительность: оптимизации за счёт частичного рендеринга и работы со слоями, характерные для Konva, доступные через компоненты.
  • Интеграция с Angular CLI: совместимость с типичными инструментами сборки и статической типизацией TypeScript.
Подробнее