Приложение для рисования кривых Безье средствами HTML-SVG на базе React
- Убедитесь, что у вас на локальной машине установлен git, node.js и npm
- Склонируйте этот репозиторий:
[email protected]:pvburkov/bezier-curves-app.git
- Перейдите в папку приложения:
cd bezier-curves-app
- Установите все нужные для работы приложения пакеты:
npm install
- Запускайте приложение:
npm start
- Левое окно - место работы с геометрией: здесь вводятся и перетаскиваются точки, отображается кривая Безье.
- В правом окне есть выпадающий список для выбора типа кривой (квадратичная/кубическая), кнопка очистки поля геометрии и список точек кривой, по которым она строится (их координаты в пределах поля геометрии; опорные точки обозначены как P1 и P2, управляющие точки - как Pc1 и Pc2 (point-control)).
- Точки вводятся кликом по полю ввода геометрии; когда будут введены все нужные точки для выбранного типа кривой, кривая будет отображена. Ее можно редактировать при помощи имеющихся точек, которые можно перетаскивать в пределах поля ввода геометрии.
- При смене типа кривой (список справа) вся геометрия автоматически удаляется.
В директории проекта доступны несколько скриптов:
Скрипт запускает приложение в режиме разработки
(в начале проходят проверки кода с использованием ESLint).
Откройте http://localhost:8080, чтобы увидеть результат в браузере.
Страница будет перезагружена при внесении каких-либо изменений в код.
Генерация оптимизированных исходников и сборка рабочего варианта (билда) приложения в директории dist
.