OkunElya/uni-web-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

spiral path added

Browse Source
This commit is contained in:
=
2026-03-13 17:11:48 +10:00
parent c7f1192b41
commit 4bd2a92a0e
2 changed files with 19 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
current_site/src/pages/svg_playground.pug
View File

@@ -22,9 +22,9 @@ html(lang="ru")
input#cx_finish.anim-related(type="number", value="300", max="600", min="0")
br
label(for="cy") y:
input#cy.anim-related(type="number", value="300", max="600", min="0")
input#cy(type="number", value="300", max="600", min="0")
label.anim-related(for="cy_finish") до:
input#cy_finish(type="number", value="300", max="600", min="0")
input.anim-related#cy_finish(type="number", value="300", max="600", min="0")
p.path-anim-related
| Пути перемещения

19
current_site/src/pages/svg_playground/path.js
View File

@@ -41,14 +41,29 @@ function createPathCircle() {
for (let t = 0 ; t <= Math.PI * 2; t += 0.1) {
data.push(
{x: width / 2 + width / 3 * Math.sin(t),
y: height / 2 + height / 3 * Math.cos(t)}
y: height / 2 + height / 3* Math.cos(t)}
);
}
return data
}
function createPathSpiral() {
const svg = d3.select("svg")
const width = svg.attr("width")
const height = svg.attr("height")
let data = [];
// используем параметрическую форму описания круга
// центр расположен в центре svg-элемента, а радиус равен трети высоты/ширины
for (let t = 0 ; t <= Math.PI * 6; t += 0.1) {
data.push(
{x: width / 2 + width / 3 *(1-(t/(Math.PI * 6))) * -Math.sin(t),
y: height / 2 + height / 3*(1-(t/(Math.PI * 6))) * Math.cos(t)}
);
}
return data
}
const drawPath =(typePath) => {
// создаем массив точек
const dataPoints = (typePath == 0)? createPathG() : createPathCircle();
const dataPoints = [ createPathG, createPathCircle,createPathSpiral][Number(typePath)]()
const line = d3.line()
.x((d) => d.x)