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

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

@@ -8,8 +8,8 @@
// создаем массив точек, расположенных буквой "Г"
function createPathG() {
const svg = d3.select("svg")
const width = svg.attr("width")
const height = svg.attr("height")
const width = svg.attr("width")
const height = svg.attr("height")
let data = [];
const padding = 100;
@@ -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
@@ -33,56 +33,60 @@ function createPathG() {
// создаем массив точек, расположенных по кругу
function createPathCircle() {
const svg = d3.select("svg")
const width = svg.attr("width")
const height = svg.attr("height")
const width = svg.attr("width")
const height = svg.attr("height")
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
}
function createPathSpiral() {
const svg = d3.select("svg")
const width = svg.attr("width")
const height = svg.attr("height")
const width = svg.attr("width")
const height = svg.attr("height")
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 dataPoints = [ createPathG, createPathCircle,createPathSpiral][Number(typePath)]()
const drawPath = (typePath) => {
// создаем массив точек
const dataPoints = [createPathG, createPathCircle, createPathSpiral][Number(typePath)]()
const line = d3.line()
.x((d) => d.x)
.y((d) => d.y);
const line = d3.line()
.x((d) => d.x)
.y((d) => d.y);
const svg = d3.select("svg")
// создаем путь на основе массива точек
const path = svg.append('path')
.attr('d', line(dataPoints))
.attr('stroke', 'black')
.attr('fill', 'none');
// создаем путь на основе массива точек
const path = svg.append('path')
.attr('d', line(dataPoints))
.attr('stroke', 'black')
.attr('fill', 'none');
return path;
return path;
}
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})`;
}
}