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