inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

SVG 마스터

그림판에 도형을 따라 그리기

562

고만석

작성한 질문수 2

0

안녕하세요!

그림판 처럼 보이는 곳에 도형이 이미 그려져 있고, 그것을 잘 따라 그리면 true, 잘 못 따라 그리면 false 라는걸 만들고 싶습니다.

모바일에서 동작하게 만들고 싶은데

도형을 잘 따라 그렸는지를 어떤식으로 확인 할 수 있을까요?

대략적인 방향을 잡아주시면 많은 도움이 될거같습니다 ㅠ

이러한 기능을 구현하려면 svg로 해야하는건지 canvas를 이용해야 하는지도 궁금합니다.

감사합니다!

HTML/CSS svg

답변 1

1

1분코딩

저도 같은 작업을 해본적은 없지만 생각나는 방향을 말씀드려보면,
그린다는 것 자체가 x, y 좌표를 가진 점들의 자취이므로
그리면서 찍은 점들의 좌표를 배열 등에 저장해두고,
원본 이미지의 좌표들과 비교해가며 전체적인 오차값이 일정 기준 이하라면 ok 판정을 내주면 되지 않을까 싶습니다.
이렇게 단순하게 처리하는 것 말고 이런건 딥러닝 분야를 접목해서 하면 보다 정확하게 구현이 가능할 것 같은데
당장 그걸 하기는 쉽지 않을테니^^; 저도 생각나는걸 말씀드린거라서, 해외 자료 등을 검색해보시면 더 좋은 방법이 있을 수 있을 것 같습니다^^
로직만 구현이 된다면 캔버스냐 svg냐는 크게 중요한 문제는 아닐 것 같지만,
일반적으로 점이 많아지면 svg보다는 캔버스로 하시는게 성능이 더 좋답니다.

svg 직접 그리기

0

59

1

SVG 파일 CSS 애니메이션

0

215

1

곡선에 따라 글자쓰기에서 path 대신 circle은 안되나요?

0

285

1

선생님 질문 있습니다! svg 태그에 object-fit: cover; 같은 속성을 적용하기는 어려울까요?

0

585

1

atom 서비스 종료, emmet 설치안됨

0

1425

1

SVG 태그 중 foreignObject 관련하여 질문드립니다.

0

1565

1

마스크가 안돼요..

0

431

2

강의 노션

0

404

1

강의 노션

0

341

1

마스크 2에서 배경으로 깔린 패턴 애니메이션이 멈춰있는 현상

1

238

1

path 를 x ,y로 이동

0

287

1

같은 페이지에 같은 svg 아이콘을 사용할 경우 id 값이 동일해도 되나요?

0

363

1

마스크2 돋보기 질문

0

391

1

압축에 관하여

0

280

1

svg 강의 스트로크 편 구현 에서 제가 적용하면 안되는게 있어요

0

418

2

패스 강의 관련 태그 질문 드립니다 ㅠ.ㅠ

0

514

1

글씨 깨짐

0

434

1

smil 무한반복 질문

0

236

1

SMIL 애니메이션 중복 관련 질문드립니다. ( + 융의 땅 관련 질문 추가...)

0

334

1

class name 정의 하실때 bem 방법 사용하시나요??

0

332

1

마스크 2 에서 질문있습니다.

0

265

1

path로 그린 svg 화면 꽉채우기

0

883

1

svg 파일 불러오기

0

369

1

svg 태그 질문!

0

234

1