SVG и Canvas: графический редактор
Общий проект «Схема» развивается от договора данных до готового результата. Каждый урок объясняет один переход; фрагменты привязаны к файлам полного примера.
Предпосылки: Основы HTML, CSS, объектов и модулей JavaScript; готовность читать координаты и простые формулы. Среда: Нативные ES modules, SVG, Pointer Events, DOMMatrix, structuredClone и Canvas 2D; современный браузер, локальный HTTP-сервер.
Материалы опубликованы. Учебное приложение не запускалось, тесты и измерения не выполнялись. Показанные результаты ожидаемые. Архив содержит один полный итоговый набор файлов, а не десять выполненных снимков.
Уроки
| Урок | Результат |
|---|---|
| 1. Документ, фигура и координаты редактора | Проверяемый документ с устойчивыми идентификаторами и единой геометрией rect/ellipse. |
| 2. SVG из данных, без HTML-строк | SVG строится из модели; подписи выводятся текстом, порядок массива задаёт слои. |
| 3. Координаты указателя и попадание в фигуру | Экранная точка переводится в документ; верхняя фигура находится по собственной геометрии. |
| 4. Перемещение и команды изменения | Один указатель перемещает фигуру от исходной точки; завершение и отмена имеют разные переходы. |
| 5. Масштаб и перемещение камеры | Камера управляет viewBox без изменения документа; масштаб удерживает опорную точку. |
| 6. Выделение, порядок и свойства фигур | Список, форма и кнопки меняют одну модель; порядок слоёв согласован с рисунком. |
| 7. Отмена действий и границы операции | Снимки прошлого/настоящего/будущего и временный жест дают отмену целых намерений. |
| 8. Сохранение документа и проверка импорта | Стабильный документ сохраняется локально; внешний JSON проверяется до замены. |
| 9. Экспорт изображения через Canvas | SVG и PNG формируются из полного документа независимо от просмотра. |
| 10. Доступное управление и передача редактора | HTML-управление, сообщения и маршрут будущей проверки описаны для передачи редактора. |
Исходники и продолжение
Скачать полный проект. README описывает самостоятельное открытие через HTTP, ограничения и будущие проверки. Исходники требуют технической проверки перед публикацией приложения.