112 lines
2.6 KiB
JavaScript
112 lines
2.6 KiB
JavaScript
export default function Footer({ path }) {
|
|
const getPath = (e, path) => {
|
|
let newLines = [];
|
|
|
|
for (let line of path.split("\n")) {
|
|
if (line[0] == "P") continue;
|
|
if (line[0] == "S") continue;
|
|
if (line[0] == "X") continue;
|
|
|
|
newLines.push(line);
|
|
}
|
|
let xs = [];
|
|
let ys = [];
|
|
let zs = [];
|
|
let toti = 0;
|
|
let al = 0;
|
|
for (let line of newLines) {
|
|
al +=1;
|
|
let theLine = line.split(",");
|
|
//console.log(theLine)
|
|
if (
|
|
xs &&
|
|
parseFloat(theLine[0]) == xs[-1] &&
|
|
parseFloat(theLine[1]) == ys[-1]
|
|
)
|
|
continue;
|
|
|
|
if (al > 2) {
|
|
let dist = ((xs[xs.length-1] - xs[xs.length-2]) ** 2 + (ys[ys.length-1] - ys[ys.length-2]) ** 2) ** 0.5;
|
|
toti += Math.round(dist);
|
|
}
|
|
xs.push(parseFloat(theLine[0]));
|
|
ys.push(parseFloat(theLine[1]));
|
|
zs.push(parseFloat(theLine[2]));
|
|
}
|
|
let prevLine = ["0", "0", "0"];
|
|
let scaleFactor = 100000 / 2000;
|
|
const canvas = document.getElementById("canvas");
|
|
|
|
if (!canvas.getContext) {
|
|
console.log("canvas err");
|
|
return;
|
|
}
|
|
|
|
const ctx = canvas.getContext("2d");
|
|
|
|
// set line stroke and line width
|
|
ctx.strokeStyle = "red";
|
|
ctx.lineWidth = 2;
|
|
let totalH = Math.max(...zs);
|
|
let minH = Math.min(...zs);
|
|
for (let line = 0; line < xs.length - 1; line++) {
|
|
let theLine = [xs[line], ys[line], zs[line]];
|
|
let x = parseFloat(theLine[0]) - parseFloat(prevLine[0]);
|
|
let y = parseFloat(theLine[1]) - parseFloat(prevLine[1]);
|
|
let x1 = line * scaleFactor;
|
|
let y1 = zs[line];
|
|
let x2 = (line + 1) * scaleFactor;
|
|
let y2 = zs[line + 1];
|
|
//console.log(x1, y1, x2, y2);
|
|
let b0 = 0;
|
|
let b1 = 500;
|
|
let z1 = b0 + (b1 - b0) * ((y1 - totalH) / (minH - totalH));
|
|
let z2 = b0 + (b1 - b0) * ((y2 - totalH) / (minH - totalH));
|
|
|
|
//b0 + (b1 - b0) * ((x1-0)/(toti*scaleFactor-0));
|
|
let x12 = b0 + (b1 - b0) * ((x1 - 0) / (toti*scaleFactor));
|
|
let x22 = b0 + (b1 - b0) * ((x2 - 0) / (toti*scaleFactor));
|
|
console.log(x12);
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(x12, z1);
|
|
ctx.lineTo(x22, z2);
|
|
ctx.stroke();
|
|
}
|
|
};
|
|
const draw = (e) => {
|
|
//getPath(path);
|
|
const canvas = document.getElementById("canvas");
|
|
|
|
if (!canvas.getContext) {
|
|
return;
|
|
}
|
|
|
|
const ctx = canvas.getContext("2d");
|
|
|
|
// set line stroke and line width
|
|
ctx.strokeStyle = "red";
|
|
ctx.lineWidth = 2;
|
|
|
|
// draw a red line
|
|
ctx.beginPath();
|
|
ctx.moveTo(234, 100);
|
|
ctx.lineTo(234, 105);
|
|
ctx.stroke();
|
|
};
|
|
//draw()
|
|
return (
|
|
<>
|
|
<canvas id="canvas" height="600" width="600"></canvas>
|
|
<button
|
|
onClick={(e) => {
|
|
//draw();
|
|
getPath(e, path);
|
|
}}
|
|
>
|
|
Rys
|
|
</button>
|
|
</>
|
|
);
|
|
}
|