практика_отсечение-многоугольников / Наволоцкий_1302

3. Структура и Архитектура приложения

Приложение разработано на стеке: TypeScript [3] + Vue 3 [1] + PixiJS [2].

Архитектура следует паттерну MVC (Model-View-Controller), обеспечивая отделение данных от логики и представления.

Структура файлов проекта:

1. Model (Данные):

osrc/core/types.ts: Содержит классы Polygon (массив вершин, цвет,

методы трансформации) и Line. Эти классы хранят чистые математические данные и не зависят от графического движка.

2.Logic / Math (Ядро):

osrc/core/math/Matrix.ts: Реализация матричных операций

(умножение матриц, трансформация точки).

osrc/core/math/Geometry.ts: Библиотека статических методов. Здесь реализованы: вычисление коэффициентов прямой, метод Крамера,

тест на вхождение точки в полигон (Ray Casting) и основной алгоритм отсечения cutPolygon.

o src/core/utils/CoordinateSystem.ts: Утилиты для перевода координат World <-> Screen.

3. View (Представление):

o src/components/PixiCanvas.vue: Компонент, отвечающий за рендеринг. Использует библиотеку PixiJS.

o Функции View: Отрисовка координатной сетки, отрисовка полигонов, обработка событий ввода (мышь/клавиатура). View не выполняет математических расчетов отсечения, а только запрашивает результат у Geometry.ts.

4. Controller (Управление):

o src/App.vue: Корневой компонент. Управляет состоянием приложения (текущий инструмент, список фигур), обрабатывает операции с файлами (Open/Save) и связывает интерфейс с холстом.

11

3.1. Слой Математического Ядра

Вся теоретическая база, описанная в разделе 2, инкапсулирована в двух ключевых TypeScript-модулях, которые не имеют зависимостей от графического интерфейса.

А. Модуль Линейной Алгебры (src/core/math/Matrix.ts)

Этот модуль реализует механизм аффинных преобразований.

Реализация: Класс Matrix представляет собой матрицу 3 3 (хранится как одномерный массив из 9 чисел).

Связь с теорией:

Метод multiply(other: Matrix) реализует перемножение матриц по правилу «строка на столбец» для композиции трансформаций.

Методы static translation(dx, dy) и static rotation(angle) генерируют матрицы преобразований согласно формулам из п. 2.4.

Метод transformPoint(p: Point) реализует умножение матрицы на вектор-столбец точки [x, y, 1], возвращая новые координаты.

Б. Модуль Вычислительной Геометрии (src/core/math/Geometry.ts)

Здесь реализованы алгоритмы анализа и модификации геометрических

форм.

Связь с теорией:

Функция getLineCoefficients(line): Преобразует объект отрезка в коэффициенты , , общего уравнения прямой.

Функция evaluatePoint(...): Реализует подстановку координат точки в уравнение прямой для определения полуплоскости (знак результата).

Функция getIntersection(...): Программно реализует Метод Крамера для решения системы двух линейных уравнений. Вычисляет детерминант матрицы и возвращает точку пересечения.

12

многоугольник (используется при тесте мостов).

Функция cutPolygon(poly, line): Агрегирует вышеописанные методы для реализации графового алгоритма отсечения (Chains & Bridges).

Принимает на вход исходный полигон и возвращает массивы вершин для новых фигур.

3.2. Взаимодействие приложения с математикой (Interaction Pipeline)

Взаимодействие между пользователем и математическим ядром происходит через событийную модель. Рассмотрим цепочки вызовов для основных операций:

Сценарий 1: Вращение фигуры (Rotate)

1. View (PixiCanvas.vue): Событие onStageMove перехватывает координаты курсора (экранные пиксели).

2.Utils: Вызывается CoordinateSystem.toWorld(), переводящая пиксели в декартову систему координат.

3.Math Call: Вычисляется текущий угол через Math.atan2(dy, dx).

4.Model Update: Вызывается метод polygon.rotateAround(angle, center).

5.Matrix Execution: Внутри модели создается цепочка матриц −1 ∙ ∙ ,

которая применяется ко всем вершинам массива vertices. Координаты обновляются.

Сценарий 2: Динамическое отсечение (Clipping)

Операция отсечения выполняется реактивно (в реальном времени) при каждом кадре отрисовки:

1.Controller (App.vue): Изменение положения секущей линии или полигонов вызывает реактивное обновление sceneData.

13

2.View Loop (drawScene): Компонент отрисовки начинает цикл обновления канваса.

oЕсли пересекается – вызывается основной алгоритм Geometry.cutPolygon().

5.Calculation: Алгоритм решает СЛАУ для всех ребер, строит граф пересечений и возвращает набор новых контуров (Point[][]).

6.Rendering: PixiJS отрисовывает полученные контуры разными цветами,

не изменяя исходный объект в памяти.

3.3. Абстракция Системы Координат

Для соответствия математическим требованиям (ось Y направлена

в Мировых координатах.

Прямое преобразование (To Screen): Перед отрисовкой любая

(Инверсия оси Y).

Обратное преобразование (To World): При клике мышью координаты

события преобразуются через toWorld:

= ( − )/

14

Это позволяет математическому ядру (Geometry.ts) работать с чистой

декартовой логикой, не заботясь об особенностях экранного рендеринга.

15

4. Организация данных

Формат файла

Данные хранятся в текстовом файле (расширение .txt) с простой структурой тегов.

Пример:

POLYGON 0 0 0 100

100 100

100 0

50 50 END

LINE -50 25 150 25

Парсер (FileParser.ts) считывает файл построчно, формируя объекты в памяти. Последняя точка полигона не должна замыкаться на первой.

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

Хранение данных в Runtime (Во время работы)

Основное состояние хранится в реактивном объекте sceneData.

Исходные данные: Хранятся как объекты Polygon с полным набором вершин. Они модифицируются только при операциях Move/Rotate.

Результаты отсечения: Не хранятся перманентно. Они вычисляются динамически ("на лету") при каждом изменении сцены внутри цикла отрисовки. Это позволяет пользователю двигать секущую прямую и видеть результат в реальном времени (Real-time Feedback).

16

5.Руководство пользователя

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

1.Запуск: Откройте приложение в браузере. Общий вид приложения с пустой сеткой и панелью меню показан на рисунке 1

Рисунок 1 – общий вид приложения с пустой сеткой и панелью меню

2. Создание геометрии:

oИнструмент Полигон: Кликайте ЛКМ для создания вершин.

Кликните в первую точку для замыкания контура. На рисунке 2

показан процесс построение полигона.

17

Рисунок 2 – процесс построения полигона

oИнструмент Линия: чтобы задать первую точку нажмите ЛКМ для старта, отпустите, потяните для задания места для второй точки,

нажмите ЛКМ, отпустите для создания секущей прямой. На рисунке 3 показан процесс построения линии

Рисунок 3 – процесс построения линии

3. Редактирование:

o Инструмент Move: Перетаскивание фигур мышью.

Поддерживается выделение нескольких фигур (Ctrl + Клик).

Процесс переноса полигона и линии показан на рисунке 4.

Рисунок 4 – процесс переноса полигона и линии

18

oИнструмент Rotate: Вращение выделенных фигур вокруг их общего центра масс. Процесс поворота полигона и линии показан на рисунке 5.

Рисунок 5 – процесс поворота полигона и линии

4. Отсечение: Происходит автоматически при наличии полигонов и линии. o Зеленая область: Часть фигуры в положительной полуплоскости. o Красная область: Часть фигуры в отрицательной полуплоскости.

Результат отсечения виден сразу после построения хотя бы одного полигона и одной линии. Получившаяся структура после отсечения показана на рисунке 6.

Рисунок 6 – получившаяся структура после отсечения

19

5.Сохранение: Кнопка сохранения сохраняет текущее состояние

(координаты вершин) в файл. Процесс сохранения показан на рисунке 7,

где обведена кнопка сохранения в файл. Файл сохраняется в раздел

«Документы» пользователя компьютера.

Рисунок 7 – процесс сохранения результата в текстовый файл

6.Открытие: Кнопка открытия открывает сохраненные ранее результаты.

Процесс открытия имеющихся файлов представлен на рисунке 8.

Рисунок 8 – процесс открытия имеющихся файлов Открытый файл, если он соответствует формату .txt и требованиям к структуре файла считывается программой и выдает готовую структуру для дальнейшей работы, которая отражена на рисунке 9.

20