Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // 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;
- };
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement