DrawPath.js

// const canvas = document.getElementById("canvasView");
// const ctx = canvas.getContext("2d"); 필요.
// 캔버스에 대해 전처리 알고리즘이 필요하면 const canvasPostprocessing = () => {}

//


const clearCanvas = function (canvas) {
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    if (typeof canvasPostprocessing !== 'undefined') {
        canvasPostprocessing(canvas);
    }
}

const findPath = function () {
    // 각 정점간의 연결을 나타내는 path를 시작점에서부터 끝점까지 순서대로 담은 배열을 반환
};

const drawPath = function () {
    const path = findPath();
    if (path.length === 0) {
        return false;
    }

    drawRouteAnimated(path, "red", 3, (500 + path.length * 200)); // path배열, 색상, 두께, duration
    return true;
};


//offset은 캔버스 객체의 데이터셋에 담아서 설정
const toCoordinate = function () {
    const position = ("")//path를 통해 정점을 가리키는 매개면수를 받아 좌표 정보를 가진 정점을 찾아옴
    let offsetX = 0;
    let offsetY = 0;
    if (canvas.dataset.offsetX) {
        offsetX = canvas.dataset.offsetX;
    }
    if (canvas.dataset.offsetY) {
        offsetY = canvas.dataset.offsetY;
    }
    return position ? {x: position.x + Number(offsetX), y: position.y + Number(offsetY)} : null;
    //정점의 좌표 정보(예시에선 position.x / position.y가 존재한다고 간주)에 offSet을 더함.
};

const drawAllRoutes = function () {
    clearCanvas(canvas);
    navRepo2D.pathRepo.forEach(function (route) {
        drawRoute([route.posA, route.posB], "black", 1);
    });
};
const drawRoute = function (path, color, width) {
    ctx.strokeStyle = color;
    ctx.lineWidth = width;

    ctx.beginPath();
    for (let i = 0; i < path.length - 1; i++) {
        const startPos = toCoordinate(path[i]);
        const endPos = toCoordinate(path[i + 1]);
        if (startPos && endPos) {
            ctx.moveTo(startPos.x, startPos.y);
            ctx.lineTo(endPos.x, endPos.y);
        }
    }
    ctx.stroke();
};

const drawPartialRoute = function (startPos, endPos, color, width, partialLength) {
    const segmentLength = Math.sqrt((endPos.x - startPos.x) ** 2 + (endPos.y - startPos.y) ** 2);
    const ratio = partialLength / segmentLength;
    const partialEndX = startPos.x + (endPos.x - startPos.x) * ratio;
    const partialEndY = startPos.y + (endPos.y - startPos.y) * ratio;
    ctx.strokeStyle = color;
    ctx.lineWidth = width;
    ctx.beginPath();
    ctx.moveTo(startPos.x, startPos.y);
    ctx.lineTo(partialEndX, partialEndY);
    ctx.stroke();
};

const drawRouteAnimated = function (path, color, width, duration) {
    let startTime = null;
    const totalLength = calcLength(path);
    const animateDraw = function (currentTime) {
        if (!startTime) startTime = currentTime;
        let progress = Math.min(1, (currentTime - startTime) / duration);
        const partialLength = progress * totalLength;

        clearCanvas(canvas);
        if (!canvas.dataset.noAllRoutes) {
            drawAllRoutes();
        }
        let remainingLength = partialLength;
        for (let i = 0; i < path.length - 1; i++) {
            const startPos = toCoordinate(path[i]);
            const endPos = toCoordinate(path[i + 1]);
            const segmentLength = calcLength([path[i], path[i + 1]]);
            if (remainingLength >= segmentLength) {
                drawPartialRoute(startPos, endPos, color, width, segmentLength);
                remainingLength -= segmentLength;
            } else {
                const ratio = remainingLength / segmentLength;
                const partialEndPos = {
                    x: startPos.x + (endPos.x - startPos.x) * ratio,
                    y: startPos.y + (endPos.y - startPos.y) * ratio
                };
                drawPartialRoute(startPos, partialEndPos, color, width, remainingLength);
                break;
            }
        }
        if (progress < 1) {
            requestAnimationFrame(animateDraw);
        }
    };
    requestAnimationFrame(animateDraw);
};

const calcLength = function (path) {
    let totalLength = 0;
    for (let i = 0; i < path.length - 1; i++) {
        const startPos = toCoordinate(path[i]);
        const endPos = toCoordinate(path[i + 1]);
        if (startPos && endPos) {
            totalLength += Math.sqrt((endPos.x - startPos.x) ** 2 + (endPos.y - startPos.y) ** 2);
        }
    }
    return totalLength;
};