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 strokeWidth = 1;
// maths
// logic
function getValues() {
pointsP = [];
@@ -105,58 +102,52 @@ function plotSVG() {
maxX = point.x;
}
})
let pointsA = "";
let pointsB = "";
let pathA = "M ";
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++) {
let point = panelPoints[i];
pointsA += `${maths.approx(point.x)},${(maxY) - maths.approx(point.y)} `;
pointsB +=`${maths.approx(point.x)},${maths.approx((point.y + maxY))} `;
pathA += `${maths.approx(point.x)} ${(maxY) - maths.approx(point.y)} `;
pathB +=`${maths.approx(point.x)} ${maths.approx((point.y + maxY))} `;
}
outputdiv.innerHTML = `
<svg width="297mm"
<svg width="297mm"
height="210mm"
xmlns="http://www.w3.org/2000/svg">
<g id="layer1">
<line
x1="${maths.approx(panelPoints[0].x)}${unit}"
x2="${panelPoints[0].x}${unit}"
y1="${maxY - maths.approx(panelPoints[0].y)}${unit}"
y2="${maths.approx((panelPoints[0].y + maxY))}${unit}"
fill="none"
stroke="black"
stroke-width="${strokeWidth}"
/>
<line
x1="${maths.approx(panelPoints[panelPoints.length - 1].x)}${unit}"
x2="${panelPoints[panelPoints.length - 1].x}${unit}"
y1="${maxY - maths.approx(panelPoints[panelPoints.length - 1].y)}${unit}"
y2="${maths.approx((panelPoints[panelPoints.length - 1].y + maxY))}${unit}"
fill="none"
stroke="black"
stroke-width="${strokeWidth}"
/>
<line
x1="${maths.approx(panelPoints[0].x)}${unit}"
x2="${panelPoints[panelPoints.length - 1].x}${unit}"
y1="${(maxY - maths.approx(panelPoints[0].y) + maths.approx((panelPoints[0].y + maxY))) / 2}${unit}"
y2="${(maxY - maths.approx(panelPoints[panelPoints.length - 1].y) + maths.approx((panelPoints[panelPoints.length - 1].y + maxY))) / 2}${unit}"
fill="none"
stroke="black"
stroke-width="${strokeWidth}"
/>
<polyline
points="${pointsA}"
fill="none"
stroke="black"
stroke-width="${strokeWidth}"
/>
<polyline
points="${pointsB}"
fill="none"
stroke="black"
stroke-width="${strokeWidth}"
/>
</g>
<path
d="${pathTop}"
fill="none"
stroke="black"
stroke-width="${strokeWidth}"
/>
<path
d="${pathBottom}"
fill="none"
stroke="black"
stroke-width="${strokeWidth}"
/>
<path
d="${pathCentre}"
fill="none"
stroke="black"
stroke-width="${strokeWidth}"
/>
<path
d="${pathA}"
stroke="black"
fill="none"
stroke-width="${strokeWidth}"
/>
<path
d="${pathB}"
stroke="black"
fill="none"
stroke-width="${strokeWidth}"
/>
</g>
</svg>
`;
lenOutput.innerText = `Recommended length: ${maths.approx(maxX - minX)} ${unit}`;