-## 👩💻 팀 소개
-
-
-
(따라핑)
+## 👩💻 팀 소개 👩💻
### 안녕하세요, 팀 "따라따라" 입니다!
+
+
+저희는 6주간 ⚒ **"기술적 도전"** ⚒을 목표로 삼았습니다.
+
+
+
+저희는 단순히 api나 라이브러리를 **"가져다 써서" 구현 하는 것이 아닌**,
+
+**모든 것을 "직접 구현"** 해보고, 그 과정에서 깊이 있는 기술적인 도전을 해 나갑니다.
+
+
## 🗝 링크 안내
- 팀 위키 |
+
팀 노션 |
기획서 |
디자인
From 494e7b6816097506e1e53859b01f557cf4bfac7d Mon Sep 17 00:00:00 2001
From: Hyein Jeong <103382269+happyhyep@users.noreply.github.com>
Date: Sat, 30 Nov 2024 22:42:07 +0900
Subject: [PATCH 02/30] Update README.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
아키텍처 추가
---
README.md | 35 +++++++++++++++++------------------
1 file changed, 17 insertions(+), 18 deletions(-)
diff --git a/README.md b/README.md
index 61712a8e..74b2879c 100644
--- a/README.md
+++ b/README.md
@@ -24,6 +24,23 @@
**모든 것을 "직접 구현"** 해보고, 그 과정에서 깊이 있는 기술적인 도전을 해 나갑니다.
+@juwon5272 |@leedongyull |@effozen |@happyhyep |
+
+@juwon5272 |@leedongyull |@effozen |@happyhyep |
-
From 72b54ba93dd0c5ae74139493c95d0683a1592906 Mon Sep 17 00:00:00 2001
From: Hyein Jeong <103382269+happyhyep@users.noreply.github.com>
Date: Sat, 30 Nov 2024 22:48:26 +0900
Subject: [PATCH 03/30] Update README.md
---
README.md | 5 +++--
1 file changed, 3 insertions(+), 2 deletions(-)
diff --git a/README.md b/README.md
index 74b2879c..d1e10fa6 100644
--- a/README.md
+++ b/README.md
@@ -3,7 +3,8 @@
From a17aaa9f93db293e6b6384a1cd6a5223021e67c9 Mon Sep 17 00:00:00 2001
From: Hyein Jeong <103382269+happyhyep@users.noreply.github.com>
Date: Sun, 1 Dec 2024 00:06:31 +0900
Subject: [PATCH 09/30] Update README.md
---
README.md | 2 ++
1 file changed, 2 insertions(+)
diff --git a/README.md b/README.md
index 5367cb51..1295a41e 100644
--- a/README.md
+++ b/README.md
@@ -36,8 +36,10 @@
- 캔버스 위에 그려둔 그림은 지도(캔버스)를 이동하거나 확대/축소하더라도 그린 위치(지도 기준)에 그대로 존재해야 함
+
From 605a34840ab2944ecab6b0e91dcff8d306ef68a1 Mon Sep 17 00:00:00 2001
From: Hyein Jeong <103382269+happyhyep@users.noreply.github.com>
Date: Sun, 1 Dec 2024 23:25:12 +0900
Subject: [PATCH 20/30] Update README.md
---
README.md | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/README.md b/README.md
index f7f024c7..2d259cf7 100644
--- a/README.md
+++ b/README.md
@@ -17,12 +17,13 @@
-
+
+
From 4c113078510a4cbca3cec321887648cfe2596bc8 Mon Sep 17 00:00:00 2001
From: Hyein Jeong <103382269+happyhyep@users.noreply.github.com>
Date: Sun, 1 Dec 2024 23:33:50 +0900
Subject: [PATCH 21/30] Update README.md
---
README.md | 18 +++++++++++++++++-
1 file changed, 17 insertions(+), 1 deletion(-)
diff --git a/README.md b/README.md
index 2d259cf7..e8b4b847 100644
--- a/README.md
+++ b/README.md
@@ -90,8 +90,24 @@
## 📃 기술적 도전
-- 추가될 예정입니다.
+### by. J060_김주원
+- [[FE] 🎨 지도의 기능들 canvas에서 구현하기](https://velog.io/@jackson5272/%EC%A7%80%EB%8F%84%EC%9D%98-%EA%B8%B0%EB%8A%A5%EB%93%A4-canvas%EC%97%90%EC%84%9C-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0)
+
+### by. J174_이동율
+
+- [[FE] 💾 초보 개발자의 데이터 관리 시행착오](https://misty-thread-f6e.notion.site/FE-14f87662ce1380b39c90d38e24a2dad8?pvs=4)
+
+### by. J210_임재도
+
+- [[FE] 🧬 캔버스와 네이버 지도 API를 연동하기 위한 과정](https://fantasmith.com/dev-lab/challenge/boostcamp/ddara/canvas-and-map-linking)
+
+
+### by. J234_정혜인
+
+- [[FE] 🗺️ 지도와 함께 움직이는 캔버스 설계/구현 시행착오 스토리](https://velog.io/@happyhyep/%EC%A7%80%EB%8F%84%EC%99%80-%ED%95%A8%EA%BB%98-%EC%9B%80%EC%A7%81%EC%9D%B4%EB%8A%94-%EC%BA%94%EB%B2%84%EC%8A%A4-%EA%B5%AC%ED%98%84-%EC%8A%A4%ED%86%A0%EB%A6%AC)
+
+- [[BE] 🔌 실시간 소켓 통신의 도전기: 다양한 조건이 존재하는 통신 feat. 클라이언트와 서버 각각에서의 고민과 설계 과정](https://velog.io/@happyhyep/%EC%8B%A4%EC%8B%9C%EA%B0%84-%EC%86%8C%EC%BC%93-%ED%86%B5%EC%8B%A0%EC%9D%98-%EB%8F%84%EC%A0%84%EA%B8%B0-%EB%8B%A4%EC%96%91%ED%95%9C-%EC%A1%B0%EA%B1%B4%EC%9D%B4-%EC%A1%B4%EC%9E%AC%ED%95%98%EB%8A%94-%ED%86%B5%EC%8B%A0)
From 14f5307fb06135a01800e76f361423d851d64231 Mon Sep 17 00:00:00 2001
From: Hyein Jeong <103382269+happyhyep@users.noreply.github.com>
Date: Mon, 2 Dec 2024 00:13:31 +0900
Subject: [PATCH 22/30] Update README.md
---
README.md | 5 +++--
1 file changed, 3 insertions(+), 2 deletions(-)
diff --git a/README.md b/README.md
index e8b4b847..a6fbe21a 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,8 @@
🕶️ 팀 소개 🕶️
+
+
### 안녕하세요, 팀 "따라따라" 입니다!
@@ -82,8 +84,7 @@
## ⛏ 서비스 아키텍처
-
-
+
From 329bbcad53d4582ab931d2d3228cb2be55809ce7 Mon Sep 17 00:00:00 2001
From: Hyein Jeong <103382269+happyhyep@users.noreply.github.com>
Date: Mon, 2 Dec 2024 00:15:17 +0900
Subject: [PATCH 23/30] Update README.md
---
README.md | 5 ++++-
1 file changed, 4 insertions(+), 1 deletion(-)
diff --git a/README.md b/README.md
index a6fbe21a..23b047fc 100644
--- a/README.md
+++ b/README.md
@@ -22,11 +22,13 @@
+
+
-
+
@@ -43,6 +45,7 @@
+
From 5d03ffd0fd05e453fdbe0bf156e21bf365a15552 Mon Sep 17 00:00:00 2001
From: Hyein Jeong <103382269+happyhyep@users.noreply.github.com>
Date: Mon, 2 Dec 2024 00:16:39 +0900
Subject: [PATCH 24/30] Update README.md
---
README.md | 1 +
1 file changed, 1 insertion(+)
diff --git a/README.md b/README.md
index 23b047fc..695dddf9 100644
--- a/README.md
+++ b/README.md
@@ -26,6 +26,7 @@
+(모바일에서 위 QR 코드로 접속하실 수 있습니다.)
From 707687405630f994cbd8e97aa48d871a3849da50 Mon Sep 17 00:00:00 2001
From: Hyein Jeong <103382269+happyhyep@users.noreply.github.com>
Date: Mon, 2 Dec 2024 00:20:41 +0900
Subject: [PATCH 25/30] Update README.md
---
README.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/README.md b/README.md
index 695dddf9..a00395de 100644
--- a/README.md
+++ b/README.md
@@ -16,7 +16,7 @@
**모든 것을 "직접 구현"** 해보고, 그 과정에서 깊이 있는 기술적인 도전을 해 나갑니다.
-
+
From a3d19c36fd687e1487a91b9ac842ef8057ce4b76 Mon Sep 17 00:00:00 2001
From: Hyein Jeong <103382269+happyhyep@users.noreply.github.com>
Date: Mon, 2 Dec 2024 00:23:31 +0900
Subject: [PATCH 26/30] Update README.md
---
README.md | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/README.md b/README.md
index a00395de..b0d6d937 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,8 @@
🕶️ 팀 소개 🕶️
+
+
-
### 안녕하세요, 팀 "따라따라" 입니다!
From 26368010e0e51048ef0c03e80943243eb81712cb Mon Sep 17 00:00:00 2001
From: Hyein Jeong <103382269+happyhyep@users.noreply.github.com>
Date: Mon, 2 Dec 2024 00:27:14 +0900
Subject: [PATCH 27/30] Update README.md
---
README.md | 20 ++++++++++----------
1 file changed, 10 insertions(+), 10 deletions(-)
diff --git a/README.md b/README.md
index b0d6d937..97f4655d 100644
--- a/README.md
+++ b/README.md
@@ -84,17 +84,9 @@
-
-
-
-## ⛏ 서비스 아키텍처
-
-
-
-
-## 📃 기술적 도전
+## 📃 우리의 기술적 도전
### by. J060_김주원
@@ -116,6 +108,14 @@
- [[BE] 🔌 실시간 소켓 통신의 도전기: 다양한 조건이 존재하는 통신 feat. 클라이언트와 서버 각각에서의 고민과 설계 과정](https://velog.io/@happyhyep/%EC%8B%A4%EC%8B%9C%EA%B0%84-%EC%86%8C%EC%BC%93-%ED%86%B5%EC%8B%A0%EC%9D%98-%EB%8F%84%EC%A0%84%EA%B8%B0-%EB%8B%A4%EC%96%91%ED%95%9C-%EC%A1%B0%EA%B1%B4%EC%9D%B4-%EC%A1%B4%EC%9E%AC%ED%95%98%EB%8A%94-%ED%86%B5%EC%8B%A0)
+
+
+
+## ⛏ 서비스 아키텍처
+
+
+
+
@@ -125,7 +125,7 @@
|J060_김주원|J174_이동율|J210_임재도|J234_정혜인|
|:--:|:--:|:--:|:--:|
-|
|
|
|
|
+|
|
|
|
|
|FE|FE|FE|Full Stack (FE + BE)|
|
@juwon5272 |
@leedongyull |
@effozen |
@happyhyep |
From 15e02aa36dc919de87d9fd01bf08f0b51c066de3 Mon Sep 17 00:00:00 2001
From: effozen
Date: Mon, 2 Dec 2024 20:32:49 +0900
Subject: [PATCH 28/30] =?UTF-8?q?[FE][Feat]=20#359=20:=20=EC=84=A0=20?=
=?UTF-8?q?=EC=83=89=EC=83=81=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20GuestMark?=
=?UTF-8?q?er=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
frontend/src/assets/endmarker.svg | 2 +-
frontend/src/assets/mylocation.svg | 2 +-
frontend/src/assets/startmarker.svg | 2 +-
.../src/component/IconGuide/GuestMarker.tsx | 17 ++++---
frontend/src/hooks/useRedraw.ts | 49 ++++++++++++++-----
frontend/src/lib/constants/canvasConstants.ts | 1 +
frontend/src/pages/GuestView.tsx | 4 +-
frontend/src/pages/HostView.tsx | 1 +
8 files changed, 56 insertions(+), 22 deletions(-)
diff --git a/frontend/src/assets/endmarker.svg b/frontend/src/assets/endmarker.svg
index c09cae89..beab2b0a 100644
--- a/frontend/src/assets/endmarker.svg
+++ b/frontend/src/assets/endmarker.svg
@@ -1 +1 @@
-
{markerData.map(data => (
-
+
{data.icon}
{data.name}
diff --git a/frontend/src/hooks/useRedraw.ts b/frontend/src/hooks/useRedraw.ts
index 18f95e13..ac930358 100644
--- a/frontend/src/hooks/useRedraw.ts
+++ b/frontend/src/hooks/useRedraw.ts
@@ -1,5 +1,11 @@
import { useRef, useEffect, RefObject } from 'react';
-import { LINE_WIDTH, STROKE_STYLE } from '@/lib/constants/canvasConstants.ts';
+import {
+ END_MARKER_COLOR,
+ LINE_WIDTH,
+ PATH_COLOR,
+ START_MARKER_COLOR,
+ STROKE_STYLE,
+} from '@/lib/constants/canvasConstants.ts';
import startmarker from '@/assets/startmarker.svg';
import endmarker from '@/assets/endmarker.svg';
@@ -89,9 +95,12 @@ export const useRedrawCanvas = ({
image: HTMLImageElement | null,
zoom: number,
rotate: number,
+ color: string,
) => {
if (point && image) {
const markerSize = zoom * 5;
+ ctx.fillStyle = color || '#000';
+ ctx.strokeStyle = color || '#000';
ctx.save();
ctx.translate(point.x, point.y);
ctx.rotate(rotate);
@@ -155,8 +164,10 @@ export const useRedrawCanvas = ({
ctx.restore();
};
- const drawPath = (ctx: CanvasRenderingContext2D, points: ILatLng[]) => {
+ const drawPath = (ctx: CanvasRenderingContext2D, points: ILatLng[], color: string) => {
if (points.length === 0) return;
+ ctx.fillStyle = color || '#000';
+ ctx.strokeStyle = color || '#000';
ctx.beginPath();
const firstPoint = latLngToCanvasPoint(points[0]);
@@ -185,27 +196,42 @@ export const useRedrawCanvas = ({
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
+ // 호스트가 게스트 경로 그릴때 쓰이는 디자인
const zoom = map.getZoom();
if (startMarker) {
const startPoint = latLngToCanvasPoint(startMarker);
- drawMarker(ctx, startPoint, startImageRef.current, zoom, 0);
+ drawMarker(ctx, startPoint, startImageRef.current, zoom, 0, START_MARKER_COLOR);
}
if (endMarker) {
const endPoint = latLngToCanvasPoint(endMarker);
- drawMarker(ctx, endPoint, endImageRef.current, zoom, 0);
+ drawMarker(ctx, endPoint, endImageRef.current, zoom, 0, END_MARKER_COLOR);
}
if (pathPoints) {
- drawPath(ctx, pathPoints);
+ drawPath(ctx, pathPoints, PATH_COLOR);
}
if (lat && lng) {
const currentLocation = latLngToCanvasPoint({ lat, lng });
if (alpha) {
- drawMarker(ctx, currentLocation, character1Ref.current, zoom, (alpha * Math.PI) / 180);
+ drawMarker(
+ ctx,
+ currentLocation,
+ character1Ref.current,
+ zoom,
+ (alpha * Math.PI) / 180,
+ guests![0]?.markerStyle.color,
+ );
} else {
- drawMarker(ctx, currentLocation, character1Ref.current, zoom, 0);
+ drawMarker(
+ ctx,
+ currentLocation,
+ character1Ref.current,
+ zoom,
+ 0,
+ guests![0]?.markerStyle.color,
+ );
}
}
@@ -223,19 +249,20 @@ export const useRedrawCanvas = ({
character2Ref.current,
zoom,
(location.alpha * Math.PI) / 180,
+ color,
);
});
}
if (guests) {
- guests.forEach(({ startPoint, endPoint, paths }) => {
+ guests.forEach(({ startPoint, endPoint, paths, markerStyle }) => {
const startLocation = latLngToCanvasPoint(startPoint);
- drawMarker(ctx, startLocation, startImageRef.current, zoom, 0);
+ drawMarker(ctx, startLocation, startImageRef.current, zoom, 0, markerStyle.color);
const endLocation = latLngToCanvasPoint(endPoint);
- drawMarker(ctx, endLocation, endImageRef.current, zoom, 0);
+ drawMarker(ctx, endLocation, endImageRef.current, zoom, 0, markerStyle.color);
- drawPath(ctx, paths);
+ drawPath(ctx, paths, markerStyle.color);
});
}
};
diff --git a/frontend/src/lib/constants/canvasConstants.ts b/frontend/src/lib/constants/canvasConstants.ts
index 915079d0..4beb3c3e 100644
--- a/frontend/src/lib/constants/canvasConstants.ts
+++ b/frontend/src/lib/constants/canvasConstants.ts
@@ -2,6 +2,7 @@ export const LINE_WIDTH = 30;
export const STROKE_STYLE = 'black';
export const START_MARKER_COLOR = '#4CAF50';
export const END_MARKER_COLOR = '#F44336';
+export const PATH_COLOR = '#2196F3';
export const NAVER_STEP_SCALES = [
100, 100, 100, 100, 100, 100, 50, 30, 20, 10, 5, 3, 1, 0.5, 0.3, 0.1, 0.05, 0.03, 0.02, 0.01,
0.005,
diff --git a/frontend/src/pages/GuestView.tsx b/frontend/src/pages/GuestView.tsx
index 03638a4c..c37ac61f 100644
--- a/frontend/src/pages/GuestView.tsx
+++ b/frontend/src/pages/GuestView.tsx
@@ -5,7 +5,7 @@ import { useLocation } from 'react-router-dom';
import { MapCanvasForView } from '@/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx';
import { IPoint } from '@/lib/types/canvasInterface.ts';
import { guestEntity } from '@/api/dto/channel.dto.ts';
-import { GusetMarker } from '@/component/IconGuide/GuestMarker.tsx';
+import { GuestMarker } from '@/component/IconGuide/GuestMarker.tsx';
import { LoadingSpinner } from '@/component/common/loadingSpinner/LoadingSpinner.tsx';
import { getUserLocation } from '@/hooks/getUserLocation.ts';
import { loadLocalData, saveLocalData } from '@/utils/common/manageLocalData.ts';
@@ -93,7 +93,7 @@ export const GuestView = () => {
return (
-
Date: Mon, 2 Dec 2024 20:49:58 +0900
Subject: [PATCH 29/30] =?UTF-8?q?[FE][Feat]=20#359=20:=20=EB=A7=88?=
=?UTF-8?q?=EC=BB=A4=EC=83=89=EC=83=81=20=EC=88=98=EC=A0=95=20=EB=A1=9C?=
=?UTF-8?q?=EC=A7=81=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
frontend/src/hooks/useRedraw.ts | 38 ++++++++++++++++++++++++++++++++-
1 file changed, 37 insertions(+), 1 deletion(-)
diff --git a/frontend/src/hooks/useRedraw.ts b/frontend/src/hooks/useRedraw.ts
index ac930358..4376cf2e 100644
--- a/frontend/src/hooks/useRedraw.ts
+++ b/frontend/src/hooks/useRedraw.ts
@@ -89,6 +89,38 @@ export const useRedrawCanvas = ({
character2Ref.current.src = character2;
}, []);
+ // 캔버스에서 이미지 그리고, 캔버스 전체 색상 변경 후에 반환하는 함수
+ const colorizeImage = (
+ image: HTMLImageElement,
+ color: string,
+ width: number,
+ height: number,
+ ): HTMLCanvasElement => {
+ const tempCanvas = document.createElement('canvas');
+ tempCanvas.width = width;
+ tempCanvas.height = height;
+
+ const tempCtx = tempCanvas.getContext('2d');
+ if (!tempCtx) return tempCanvas;
+
+ // 원본 이미지 그리기
+ tempCtx.drawImage(image, 0, 0, width, height);
+
+ // 색상 적용
+ tempCtx.globalCompositeOperation = 'source-in';
+ tempCtx.fillStyle = color;
+ tempCtx.fillRect(0, 0, width, height);
+
+ return tempCanvas;
+ };
+
+ const checkMarker = (path: string) => {
+ if (path.includes('startmarker') || path.includes('endmarker') || path.includes('mylocation')) {
+ return true;
+ }
+ return false;
+ };
+
const drawMarker = (
ctx: CanvasRenderingContext2D,
point: { x: number; y: number } | null,
@@ -104,7 +136,11 @@ export const useRedrawCanvas = ({
ctx.save();
ctx.translate(point.x, point.y);
ctx.rotate(rotate);
- ctx.drawImage(image, -markerSize / 2, -markerSize / 2, markerSize, markerSize);
+ let filteredImage;
+ if (checkMarker(image.src))
+ filteredImage = colorizeImage(image, color, markerSize, markerSize);
+ else filteredImage = image;
+ ctx.drawImage(filteredImage, -markerSize / 2, -markerSize / 2, markerSize, markerSize);
ctx.restore();
}
};
From c9ac8ad166b3a47d3cfadcdc1f8395adfbddd8f1 Mon Sep 17 00:00:00 2001
From: effozen
Date: Mon, 2 Dec 2024 21:02:46 +0900
Subject: [PATCH 30/30] =?UTF-8?q?[FE][Feat]=20#359=20:=20=EB=B0=9C?=
=?UTF-8?q?=EC=9E=90=EA=B5=AD=20=EC=83=89=EC=83=81=20=EB=B3=80=EA=B2=BD=20?=
=?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
frontend/src/assets/footprint.svg | 1 +
frontend/src/hooks/useRedraw.ts | 84 ++++++++++++++++---
frontend/src/lib/constants/commonConstants.ts | 1 +
3 files changed, 74 insertions(+), 12 deletions(-)
create mode 100644 frontend/src/assets/footprint.svg
diff --git a/frontend/src/assets/footprint.svg b/frontend/src/assets/footprint.svg
new file mode 100644
index 00000000..6ccb1958
--- /dev/null
+++ b/frontend/src/assets/footprint.svg
@@ -0,0 +1 @@
+(null);
const character1Ref = useRef(null);
const character2Ref = useRef(null);
+ const footprintRef = useRef(null);
useEffect(() => {
startImageRef.current = new Image();
@@ -87,6 +89,9 @@ export const useRedrawCanvas = ({
character2Ref.current = new Image();
character2Ref.current.src = character2;
+
+ footprintRef.current = new Image();
+ footprintRef.current.src = footprint;
}, []);
// 캔버스에서 이미지 그리고, 캔버스 전체 색상 변경 후에 반환하는 함수
@@ -200,20 +205,75 @@ export const useRedrawCanvas = ({
ctx.restore();
};
+ // const drawPath = (ctx: CanvasRenderingContext2D, points: ILatLng[]) => {
+ // if (points.length === 0 || !footprintRef.current) return;
+
+ // const footprintImage = footprintRef.current;
+
+ // for (let i = 0; i < points.length - 1; i++) {
+ // const start = latLngToCanvasPoint(points[i]);
+ // const end = latLngToCanvasPoint(points[i + 1]);
+
+ // /* eslint-disable no-continue */
+ // if (!start || !end) {
+ // continue;
+ // }
+
+ // const angle = Math.atan2(end.y - start.y, end.x - start.x);
+
+ // const distance = 30;
+ // const totalDistance = Math.sqrt((end.x - start.x) ** 2 + (end.y - start.y) ** 2);
+ // const steps = Math.floor(totalDistance / distance);
+
+ // for (let j = 0; j < steps; j++) {
+ // const progress = j / steps;
+ // const x = start.x + progress * (end.x - start.x);
+ // const y = start.y + progress * (end.y - start.y);
+
+ // if (footprintImage && map) {
+ // ctx.save();
+ // ctx.translate(x, y);
+ // ctx.rotate(angle + Math.PI / 2);
+ // const markerSize = Math.min(map.getZoom() * 2, 20);
+ // ctx.drawImage(footprintImage, -markerSize / 2, -markerSize / 2, markerSize, markerSize);
+ // ctx.restore();
+ // }
+ // }
+ // }
+ // };
const drawPath = (ctx: CanvasRenderingContext2D, points: ILatLng[], color: string) => {
- if (points.length === 0) return;
- ctx.fillStyle = color || '#000';
- ctx.strokeStyle = color || '#000';
+ if (points.length === 0 || !footprintRef.current || !map) return;
- ctx.beginPath();
- const firstPoint = latLngToCanvasPoint(points[0]);
- if (firstPoint) {
- ctx.moveTo(firstPoint.x, firstPoint.y);
- for (let i = 1; i < points.length; i++) {
- const point = latLngToCanvasPoint(points[i]);
- if (point) {
- ctx.lineTo(point.x, point.y);
- }
+ const footprintImage = footprintRef.current;
+ const markerSize = Math.min(map.getZoom() * 2, 20);
+
+ const offscreenCanvas = colorizeImage(footprintImage, color, markerSize, markerSize);
+
+ for (let i = 0; i < points.length - 1; i++) {
+ const start = latLngToCanvasPoint(points[i]);
+ const end = latLngToCanvasPoint(points[i + 1]);
+
+ /* eslint-disable no-continue */
+ if (!start || !end) {
+ continue;
+ }
+
+ const angle = Math.atan2(end.y - start.y, end.x - start.x);
+
+ const distance = 30;
+ const totalDistance = Math.sqrt((end.x - start.x) ** 2 + (end.y - start.y) ** 2);
+ const steps = Math.floor(totalDistance / distance);
+
+ for (let j = 0; j < steps; j++) {
+ const progress = j / steps;
+ const x = start.x + progress * (end.x - start.x);
+ const y = start.y + progress * (end.y - start.y);
+
+ ctx.save();
+ ctx.translate(x, y);
+ ctx.rotate(angle + Math.PI / 2);
+ ctx.drawImage(offscreenCanvas, -markerSize / 2, -markerSize / 2);
+ ctx.restore();
}
ctx.stroke();
}
diff --git a/frontend/src/lib/constants/commonConstants.ts b/frontend/src/lib/constants/commonConstants.ts
index d284316d..2670e0ba 100644
--- a/frontend/src/lib/constants/commonConstants.ts
+++ b/frontend/src/lib/constants/commonConstants.ts
@@ -2,6 +2,7 @@ export const KEYS = {
LOGIN_USER: 'LUT',
LOGIN_TOKEN: 'LUT_TK',
BROWSER_TOKEN: 'BRW_TK',
+ FIRST_VISIT: 'FIRST_VISIT',
};
export const AppConfig = {