Skip to content

Commit

Permalink
Merge pull request #76 from DDD-Community/feat/#58
Browse files Browse the repository at this point in the history
[feat/#58] 눈에 원이 보이지 않도록 수정, 가이드 팝업에 설명 글자 컬러 수정
  • Loading branch information
G-hoon authored Sep 22, 2024
2 parents f726fd4 + a7cd920 commit 53cdd49
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 8 deletions.
8 changes: 4 additions & 4 deletions src/components/Posture/GuidePopup/SnapshotGuide.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,25 +20,25 @@ export default function SnapshotGuide() {
<span className="flex h-6 w-6 justify-center rounded-full bg-[#5A9CFF] text-center font-semibold text-white">
1
</span>
<span className="font-[20px] font-semibold text-green-900">머리와 목을 일직선으로 곧게 펴기</span>
<span className="font-[20px] font-semibold text-zinc-800">머리와 목을 일직선으로 곧게 펴기</span>
</div>
<div className="flex gap-3">
<span className="flex h-6 w-6 justify-center rounded-full bg-[#5A9CFF] text-center font-semibold text-white">
2
</span>
<span className="font-[20px] font-semibold text-green-900">양쪽 어깨 일직선 유지하기</span>
<span className="font-[20px] font-semibold text-zinc-800">양쪽 어깨 일직선 유지하기</span>
</div>
<div className="flex gap-3">
<span className="flex h-6 w-6 justify-center rounded-full bg-[#5A9CFF] text-center font-semibold text-white">
3
</span>
<span className="font-[20px] font-semibold text-green-900">팔은 책상 위에 수평으로 두기</span>
<span className="font-[20px] font-semibold text-zinc-800">팔은 책상 위에 수평으로 두기</span>
</div>
<div className="flex gap-3">
<span className="flex h-6 w-6 justify-center rounded-full bg-[#5A9CFF] text-center font-semibold text-white">
4
</span>
<span className="font-[20px] font-semibold text-green-900">등과 허리는 등받이에 지지하기</span>
<span className="font-[20px] font-semibold text-zinc-800">등과 허리는 등받이에 지지하기</span>
</div>
</div>
</div>
Expand Down
19 changes: 15 additions & 4 deletions src/utils/drawer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ export const drawPose = (poses: pose[], canvas: HTMLCanvasElement, isRight = tru
const leftShoulder = pose.keypoints.find((kp) => kp.name === "left_shoulder")
const rightShoulder = pose.keypoints.find((kp) => kp.name === "right_shoulder")
const color = isRight ? "#00C670" : "#EF4444"

// 왼쪽과 오른쪽 어깨 이어주는 선 그리기
if (leftShoulder && rightShoulder && leftShoulder.confidence > 0.2 && rightShoulder.confidence > 0.2) {
ctx.beginPath()
Expand All @@ -20,15 +21,25 @@ export const drawPose = (poses: pose[], canvas: HTMLCanvasElement, isRight = tru
ctx.stroke()
}

// 특정 부위에만 원 그리기 (양쪽 손목 추가)
const targetParts = [
"left_ear",
"right_ear",
"left_shoulder",
"right_shoulder",
"nose",
"left_wrist",
"right_wrist",
]
pose.keypoints.forEach((keypoint) => {
if (keypoint.confidence > 0.25) {
if (keypoint.confidence > 0.25 && targetParts.includes(keypoint.name)) {
ctx.beginPath()
ctx.arc(keypoint.x, keypoint.y, 5, 0, 2 * Math.PI)
ctx.fillStyle = "white"
ctx.fill()
ctx.strokeStyle = color // 초록색 테두리
ctx.lineWidth = 2 // 테두리 두께
ctx.stroke() // 테
ctx.strokeStyle = color
ctx.lineWidth = 2
ctx.stroke()
}
})
})
Expand Down

0 comments on commit 53cdd49

Please sign in to comment.