image에 마커를 남기는 기능을 개발하다 질문이 있습니다.

Question

인체의 어떤 부위를 선택하는 기능을 개발중에 있습니다. 위의 이미지는 배경을 제거해서 인체모형만 정확히 남겼습니다. 혹시 이런게 웹의 자체적인 제한때문인지, 아니면 뭔가 놓치고있는 점이 있는지 궁금합니다. 파란색 영역을 제외하고 인체부위만 정확하게 마커를 남길 수 있을까요?접근방식이 잘못된걸까요?? 선배님들의 고견 부탁드립니다 import React, { useState, useRef, useEffect } from 'react'; import styled from 'styled-components'; import body from '../assets/ppp-removebg-preview.png'; const ImageWrapper = styled.div` position: relative; display: inline-block; `; const Image = styled.img` width: 100%; height: auto; background-color: blue; `; const Marker = styled.div<{ x: number, y: number, size: number }>` position: absolute; width: ${({ size }) => size}px; height: ${({ size }) => size}px; background-color: red; border-radius: 50%; transform: translate(-50%, -50%); cursor: pointer; left: ${({ x }) => x}px; top: ${({ y }) => y}px; `; const Photo = () => { const [markers, setMarkers] = useState<{ x: number, y: number, size: number }[]>([]); const imageRef = useRef(null); const handleClick = (e: React.MouseEvent) => { if (!imageRef.current) return; const rect = imageRef.current.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; if (x < 0 || y < 0 || x > rect.width || y > rect.height) return; const markerIndex = markers.findIndex(marker => Math.abs(marker.x - x) < 10 && Math.abs(marker.y - y) < 10 ); if (markerIndex >= 0) { setMarkers(markers.filter((_, index) => index !== markerIndex)); } else { setMarkers([...markers, { x, y, size: 10 }]); } }; return ( {markers.map((marker, index) => ( ))} ); }; export default Photo;

양반후반 · Accepted Answer

제 생각에는 SVG로 정밀하게 좌표 그리고 백그라운드로 인체 이미지 올리고 그 영역 안에 이벤트를 다셔야 할듯 하네요.

Tae-woong Kim · Answer

필요한 코드는 구현 되어있는 것 같은데 지도에 마커를 표시할때 위도와 경도 좌표값이 필요하듯이 이미지에 특정 부분에 마커를 찍고싶을때 해당하는 영역에 좌표값을 알아야겠죠.일일이 구하는 방법도 있는데 이럴때는 GPT나 생성형AI 이용해서 뽑아내는게 편합니다.CHATGPT에다가 이미지를 던지고 각 신체의 bounding box를 물어보니Head: (123.6, 27.5, 185.4, 110.0)Left Hand: (61.8, 192.5, 108.15, 302.5)Right Hand: (200.85, 192.5, 247.2, 302.5)Left Foot: (123.6, 467.5, 154.5, 522.5)Right Foot: (154.5, 467.5, 185.4, 522.5)이렇게 알려주네요.이제 box의 중심 x,y 값을 기준으로 marker를 그려주기만 하면됩니다.codepen으로 예제남겨드리니 참고하세요.codepen

image에 마커를 남기는 기능을 개발하다 질문이 있습니다.

2개의 답변

Q&A 목록