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

format document

Browse Source
This commit is contained in:
=
2026-03-13 17:13:12 +10:00
parent 4bd2a92a0e
commit ed21fb4694
1 changed files with 34 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,12 +19,12 @@ function createPathG() {
const h = 5; const h = 5;
// координаты y - уменьшаются, x - постоянны // координаты y - уменьшаются, x - постоянны
while (posY > padding) { while (posY > padding) {
data.push( {x: posX, y: posY}); data.push({ x: posX, y: posY });
posY -= h; posY -= h;
} }
// координаты y - постоянны, x - увеличиваются // координаты y - постоянны, x - увеличиваются
while (posX < width - padding) { while (posX < width - padding) {
data.push( {x: posX, y: posY}); data.push({ x: posX, y: posY });
posX += h; posX += h;
} }
return data return data
@@ -38,10 +38,12 @@ function createPathCircle() {
let data = []; let data = [];
// используем параметрическую форму описания круга // используем параметрическую форму описания круга
// центр расположен в центре svg-элемента, а радиус равен трети высоты/ширины // центр расположен в центре svg-элемента, а радиус равен трети высоты/ширины
for (let t = 0 ; t <= Math.PI * 2; t += 0.1) { for (let t = 0; t <= Math.PI * 2; t += 0.1) {
data.push( data.push(
{x: width / 2 + width / 3 * Math.sin(t), {
y: height / 2 + height / 3* Math.cos(t)} x: width / 2 + width / 3 * Math.sin(t),
y: height / 2 + height / 3 * Math.cos(t)
}
); );
} }
return data return data
@@ -53,17 +55,19 @@ function createPathSpiral() {
let data = []; let data = [];
// используем параметрическую форму описания круга // используем параметрическую форму описания круга
// центр расположен в центре svg-элемента, а радиус равен трети высоты/ширины // центр расположен в центре svg-элемента, а радиус равен трети высоты/ширины
for (let t = 0 ; t <= Math.PI * 6; t += 0.1) { for (let t = 0; t <= Math.PI * 6; t += 0.1) {
data.push( 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)} 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 return data
} }
const drawPath =(typePath) => { const drawPath = (typePath) => {
// создаем массив точек // создаем массив точек
const dataPoints = [ createPathG, createPathCircle,createPathSpiral][Number(typePath)]() const dataPoints = [createPathG, createPathCircle, createPathSpiral][Number(typePath)]()
const line = d3.line() const line = d3.line()
.x((d) => d.x) .x((d) => d.x)
@@ -80,9 +84,9 @@ const drawPath =(typePath) => {
function translateAlong(path) { function translateAlong(path) {
const length = path.getTotalLength(); const length = path.getTotalLength();
return function() { return function () {
return function(t) { return function (t) {
const {x, y} = path.getPointAtLength(t * length); const { x, y } = path.getPointAtLength(t * length);
return `translate(${x},${y})`; return `translate(${x},${y})`;
} }
} }