chopster44/Parachute-SVG-Generator
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

changed svg which is generated to a path rather than lines

Browse Source
This commit is contained in:
chopster44 committed 2026-10-03 13:00:44 +01:00
1 parent 4ec8718cef
commit 3cb776566f
1 file changed
+39 -48
Download Patch File Download Diff File Expand all files Collapse all files
src/main.js
+39 -48
View File
@@ -30,9 +30,6 @@ let n = 0;
let unit = "px"; let unit = "px";
let strokeWidth = 1; let strokeWidth = 1;
// maths
// logic // logic
function getValues() { function getValues() {
pointsP = []; pointsP = [];
@@ -105,58 +102,52 @@ function plotSVG() {
maxX = point.x; maxX = point.x;
} }
}) })
let pointsA = ""; let pathA = "M ";
let pointsB = ""; let pathB = "M ";
let pathTop = `M ${maths.approx(panelPoints[0].x)} ${maxY - maths.approx(panelPoints[0].y)} ${panelPoints[0].x} ${maxY - maths.approx(panelPoints[0].y)}`;
let pathBottom = `M ${maths.approx(panelPoints[panelPoints.length - 1].x)} ${maxY - maths.approx(panelPoints[panelPoints.length - 1].y)} ${panelPoints[panelPoints.length - 1].x} ${maths.approx((panelPoints[panelPoints.length - 1].y + maxY))}`;
let pathCentre = `M ${maths.approx(panelPoints[0].x)} ${(maxY - maths.approx(panelPoints[0].y) + maths.approx((panelPoints[0].y + maxY))) / 2} ${panelPoints[panelPoints.length - 1].x} ${(maxY - maths.approx(panelPoints[panelPoints.length - 1].y) + maths.approx((panelPoints[panelPoints.length - 1].y + maxY))) / 2}`;
for (let i = 0; i < panelPoints.length; i++) { for (let i = 0; i < panelPoints.length; i++) {
let point = panelPoints[i]; let point = panelPoints[i];
pointsA += `${maths.approx(point.x)},${(maxY) - maths.approx(point.y)} `; pathA += `${maths.approx(point.x)} ${(maxY) - maths.approx(point.y)} `;
pointsB +=`${maths.approx(point.x)},${maths.approx((point.y + maxY))} `; pathB +=`${maths.approx(point.x)} ${maths.approx((point.y + maxY))} `;
} }
outputdiv.innerHTML = ` outputdiv.innerHTML = `
<svg width="297mm" <svg width="297mm"
height="210mm" height="210mm"
xmlns="http://www.w3.org/2000/svg"> xmlns="http://www.w3.org/2000/svg">
<g id="layer1"> <g id="layer1">
<line <path
x1="${maths.approx(panelPoints[0].x)}${unit}" d="${pathTop}"
x2="${panelPoints[0].x}${unit}" fill="none"
y1="${maxY - maths.approx(panelPoints[0].y)}${unit}" stroke="black"
y2="${maths.approx((panelPoints[0].y + maxY))}${unit}" stroke-width="${strokeWidth}"
fill="none" />
stroke="black" <path
stroke-width="${strokeWidth}" d="${pathBottom}"
/> fill="none"
<line stroke="black"
x1="${maths.approx(panelPoints[panelPoints.length - 1].x)}${unit}" stroke-width="${strokeWidth}"
x2="${panelPoints[panelPoints.length - 1].x}${unit}" />
y1="${maxY - maths.approx(panelPoints[panelPoints.length - 1].y)}${unit}" <path
y2="${maths.approx((panelPoints[panelPoints.length - 1].y + maxY))}${unit}" d="${pathCentre}"
fill="none" fill="none"
stroke="black" stroke="black"
stroke-width="${strokeWidth}" stroke-width="${strokeWidth}"
/> />
<line <path
x1="${maths.approx(panelPoints[0].x)}${unit}" d="${pathA}"
x2="${panelPoints[panelPoints.length - 1].x}${unit}" stroke="black"
y1="${(maxY - maths.approx(panelPoints[0].y) + maths.approx((panelPoints[0].y + maxY))) / 2}${unit}" fill="none"
y2="${(maxY - maths.approx(panelPoints[panelPoints.length - 1].y) + maths.approx((panelPoints[panelPoints.length - 1].y + maxY))) / 2}${unit}" stroke-width="${strokeWidth}"
fill="none" />
stroke="black" <path
stroke-width="${strokeWidth}" d="${pathB}"
/> stroke="black"
<polyline fill="none"
points="${pointsA}" stroke-width="${strokeWidth}"
fill="none" />
stroke="black" </g>
stroke-width="${strokeWidth}"
/>
<polyline
points="${pointsB}"
fill="none"
stroke="black"
stroke-width="${strokeWidth}"
/>
</g>
</svg> </svg>
`; `;
lenOutput.innerText = `Recommended length: ${maths.approx(maxX - minX)} ${unit}`; lenOutput.innerText = `Recommended length: ${maths.approx(maxX - minX)} ${unit}`;