Учебник Paper.js

Введение
- Что такое Paper.js
- История и философия библиотеки
- Установка и подключение
- Первый проект
- Структура приложения на Paper.js
Основы работы с canvas
- Инициализация Paper.js
- Объект paper и глобальная область видимости
- Размеры холста и координатная система
- View и управление отображением
- Режимы рендеринга
Геометрические примитивы
- Point и работа с точками
- Size и определение размеров
- Rectangle и прямоугольные области
- Matrix и матричные преобразования
Пути и фигуры
- Path и базовые операции
- Сегменты и точки пути
- Curves и кривые Безье
- Handles и управляющие точки
- Замкнутые и открытые пути
Готовые фигуры
- Circle
- Rectangle
- Ellipse
- RegularPolygon
- Star
- Arc
Составные пути
- CompoundPath и булевы операции
- Unite, subtract, intersect, exclude
- Работа со сложной геометрией
- Оптимизация составных путей
Стилизация объектов
- Stroke и обводка
- Fill и заливка
- StrokeWidth, strokeCap, strokeJoin
- Цвета в Paper.js
- Градиенты
- Shadow и тени
- BlendMode и режимы наложения
- Opacity и прозрачность
Текст
- PointText
- AreaText
- Шрифты и стили текста
- Выравнивание и позиционирование
- Работа с многострочным текстом
Растровые изображения
- Raster и загрузка изображений
- Размещение и масштабирование
- Обрезка и маскирование
- Получение данных пикселей
- Canvas.getContext и прямая работа с пикселями
Группы и слои
- Group и группировка объектов
- Иерархия объектов
- Layer и многослойность
- Project.layers и управление слоями
- Порядок отрисовки
Трансформации
- Position и перемещение
- Rotation и вращение
- Scaling и масштабирование
- Skew и наклон
- Transform и комбинированные преобразования
- Pivot point и точка трансформации
- Matrix и низкоуровневые преобразования
Выделение и bounds
- Bounds и ограничивающие прямоугольники
- StrokeBounds
- HandleBounds
- InternalBounds
- Применение bounds в расчётах
Клонирование и символы
- Clone и копирование объектов
- Symbol и создание символов
- SymbolItem и экземпляры символов
- Оптимизация через символы
События мыши
- MouseEvent и его свойства
- onMouseDown
- onMouseDrag
- onMouseMove
- onMouseUp
- onMouseEnter и onMouseLeave
- item.onClick и события на объектах
События клавиатуры
- KeyEvent и его свойства
- onKeyDown
- onKeyUp
- Key.isDown и проверка состояния клавиш
- Модификаторы клавиш
Анимация
- onFrame и цикл анимации
- view.onFrame
- item.onFrame
- Delta time и временные расчёты
- Управление частотой кадров
- Паузы и остановка анимации
Интерактивность
- HitTest и определение попадания
- HitResult и его свойства
- Tolerance и точность попадания
- Выбор объектов
- Drag and drop
Импорт и экспорт
- ExportJSON и сохранение в JSON
- ImportJSON и загрузка из JSON
- ExportSVG и экспорт в SVG
- ImportSVG и импорт SVG
- Работа с внешними файлами
Математические операции
- Методы Point для вычислений
- Distance, angle, normalize
- Dot product и cross product
- Interpolation и интерполяция
- Random и генерация случайных значений
Работа с кривыми
- Curve и её свойства
- getPointAt и получение точек на кривой
- getTangentAt и касательные
- getNormalAt и нормали
- getLocationAt и позиция на кривые
- Subdivide и разделение кривых
- Flatten и упрощение кривых
Булева геометрия
- Unite и объединение
- Subtract и вычитание
- Intersect и пересечение
- Exclude и исключение
- Divide и разделение
- Особенности работы с булевыми операциями
Сглаживание и упрощение
- Smooth и сглаживание путей
- Simplify и упрощение геометрии
- Параметры упрощения
- Оптимизация производительности
Collision detection
- Intersects и проверка пересечений
- Contains и проверка вложенности
- GetIntersections и получение точек пересечения
- isInside и определение внутри/снаружи
Расширенные техники анимации
- Easing функции
- Tweening и интерполяция значений
- Path morphing
- Анимация по пути
- Последовательные анимации
Частицы и системы частиц
- Создание частиц
- Физика движения
- Эмиттеры
- Оптимизация большого количества объектов
Работа с цветом
- Color и цветовые пространства
- RGB, HSB, HSL
- Преобразование между пространствами
- Операции с цветом
- Alpha channel
Паттерны и текстуры
- Pattern fill
- Создание паттернов из Path
- Создание паттернов из Raster
- Transformation паттернов
Инструменты
- Tool и создание инструментов
- Переключение между инструментами
- Кастомные инструменты рисования
- Состояние инструментов
Производительность
- Оптимизация отрисовки
- Кэширование
- Упрощение геометрии
- Удаление невидимых объектов
- Профилирование и отладка
Paper.js и DOM
- Интеграция с HTML элементами
- Множественные canvas
- Responsive design
- Обработка ресизов
PaperScript
- Синтаксис PaperScript
- Автоматический scope
- Математические операторы для Point/Size
- Отличия от обычного JavaScript
- Когда использовать PaperScript
Работа с SVG
- Особенности импорта SVG
- Сохранение стилей
- Группы и слои из SVG
- Экспорт с настройками
- Ограничения при работе с SVG
Продвинутые паттерны разработки
- Архитектура приложений
- Разделение логики и отрисовки
- Управление состоянием
- Переиспользуемые компоненты
- Паттерны проектирования
Отладка
- Визуализация bounds
- Отображение handles
- Логирование структуры объектов
- Частые ошибки и решения
- Chrome DevTools и Paper.js
Интеграция с фреймворками
- Paper.js и React
- Paper.js и Vue
- Paper.js и Angular
- Управление жизненным циклом
- TypeScript и Paper.js
Практические задачи
- Рисовалки и редакторы
- Визуализация данных
- Генеративное искусство
- Игры на Paper.js
- Интерактивные инфографики
Расширение Paper.js
- Создание плагинов
- Расширение прототипов
- Кастомные Item классы
- Интеграция сторонних библиотек