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

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

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