diff --git a/static/homepage-roadmap.js b/static/homepage-roadmap.js index a2c211fb6e3fb4ba1f1a80d63e4b57acdf4abc26..8e332fdbf487638bae85061b55895eb6f91e0c13 100644 --- a/static/homepage-roadmap.js +++ b/static/homepage-roadmap.js @@ -273,29 +273,23 @@ let branchPositions = [600, 1200, 1800, 2400]; // The vertical positions where let totalHeight = 3000; // Total height for the vertical line function verticalLine(x, y1, y2, ctx) { - // Draw the vertical line from y1 to the current height y2 ctx.moveTo(x, y1); ctx.lineTo(x, y2); } function circularArc(x, y, ctx, typeID) { - // Draw arcs for the branches if (typeID == 1) { - ctx.arc(x, y, 30, Math.PI, Math.PI/2, true); // top-left curve - } - else if (typeID == 2) { + ctx.arc(x, y, 30, Math.PI, Math.PI / 2, true); // top-left curve + } else if (typeID == 2) { ctx.arc(x, y, 30, Math.PI * 1.5, 0, false); // top-right curve - } - else if (typeID == 3) { - ctx.arc(x, y, 30, 0, Math.PI/2, false); // bottom-right curve - } - else if (typeID == 4) { + } else if (typeID == 3) { + ctx.arc(x, y, 30, 0, Math.PI / 2, false); // bottom-right curve + } else if (typeID == 4) { ctx.arc(x, y, 30, Math.PI * 1.5, Math.PI, true); // bottom-left curve } } function horizontalLine(x1, x2, y, ctx) { - // Draw the horizontal lines (branches) ctx.moveTo(x1, y); ctx.lineTo(x2, y); } @@ -307,16 +301,13 @@ function drawBranch(ctx, index) { if (index === 0) { circularArc(centerX - 30, 600, ctx, 3); horizontalLine(centerX - 30, centerX - 400, 630, ctx); - } - else if (index === 1) { + } else if (index === 1) { circularArc(centerX + 30, 1200, ctx, 1); horizontalLine(centerX + 30, centerX + 400, 1230, ctx); - } - else if (index === 2) { + } else if (index === 2) { circularArc(centerX - 30, 1800, ctx, 3); horizontalLine(centerX - 30, centerX - 400, 1830, ctx); - } - else if (index === 3) { + } else if (index === 3) { circularArc(centerX + 30, 2400, ctx, 1); horizontalLine(centerX + 30, centerX + 400, 2430, ctx); } @@ -343,6 +334,9 @@ function draw() { var scrTop = document.documentElement.scrollTop; // Get the current scroll position var maxLineHeight = Math.min(scrTop + window.innerHeight * 0.8, totalHeight); // Limit the growth of the vertical line + // Clear the canvas to redraw + ctx.clearRect(0, 0, canvas.width, canvas.height); + // Draw the vertical line, growing with scrolling var centerX = canvas.width / 2; verticalLine(centerX, 200, maxLineHeight, ctx); // Vertical line grows with scroll