Интерактивная демонстрация кривых Безье на <canvas>. По построенной кривой пробегают
засечки с равным шагом параметра t — по их сгущению видно, где точка движется медленнее.
Демо: https://sergr377.github.io/line-app
- two points curve — кривая первой степени: отрезок между
startиend. - three points curve — квадратичная кривая:
start,control,end.
Точку можно перетащить прямо по холсту, либо выбрать кнопкой pt1/pt2/pt3 и кликнуть
по полю, либо ввести координаты вручную — Enter или кнопка «Put». Координаты, выбранные
на холсте, подставляются в поля автоматически.
npm install
npm start
На Node 17 и новее react-scripts 3.4.3 падает на устаревшем хешировании webpack 4,
поэтому нужен флаг:
NODE_OPTIONS=--openssl-legacy-provider npm start
Тесты — npm test, продакшен-сборка — npm run build, публикация на GitHub Pages —
npm run deploy.
React 16 на хуках, react-router-dom 5, Create React App 3.4.3, отрисовка через Canvas 2D.
Маршрутизация на HashRouter: GitHub Pages не умеет серверные rewrite-правила, и с
BrowserRouter прямой заход на вложенный маршрут отдавал бы 404.
Обе страницы — это один компонент CurvePage, которому передаётся набор опорных точек.
Значение кривой считает алгоритм де Кастельжо в src/components/CurvePage/bezier.js,
поэтому степень кривой ограничена только длиной этого набора.