UI 영역에 서명 받기

#0 개발 목표

은행이나 보험 약관 동의에 쓰이는 전자 기기에 "터치펜을 이용해 서명하는 기능"

 

#1 개발 방향

찾아보니 유니티에서 선을 그리기 위한 방법으로는 'Line Render' 컴포넌트를 사용하는 방법과 이미지의 크기를 조절해 선을 그린 것처럼 보이게 하는 방법을 찾았는데 2번째 방법은 곡선을 표현하기에 너무 어렵기 때문에 다음에 소개하겠다.

오늘은 LineRenderer를 사용해 서명을 구현하려 한다.

 

#1-1 준비

왼쪽: 메인 카메라 / 오른쪽: 미니맵 카메라

 

서명이 UI 영역에 그려지지않아 고민하던중 미니맵을 떠올렸고 월드영역에 그려진 서명을 RawImage와 카메라의 TargetTexture를 이용해  UI영역에 보여주기로 했다. 

메인 카메라의 흰 공간에 그려지고 미니맵카메라를 해당 공간만큼의 사이즈로 조절해 서명영역과 보이는 영역을 맞춰준다.

 

#2 라인 그리기

 

마우스의 입력을 받아 라인을 그리기 위해 LinePrefab을 만들고 DrawLine.cs를 작성한다.

 

• 마우스 입력 시작
  • 준비해둔 LinePrefab을 생성하고 현재 마우스 위치를 points 리스트 첫번째에 추가한다.
• 마우스 입력 중
  • 새로운 Vector2 pos을 만들고 이전 포인트와 현재 포인트 거리의 차이가 0.1f 이상일 때 새로운 포인트를 만든다.
  • 포인트끼리는 LineRender 컴포넌트에 의해 이어짐
• 마우스 입력 끝
  • 마우스 입력에 관련된 변수들을 초기화해준다.

 

#3 서명 영역 초기화

 

lineParent에 있는 LineRenderer 컴포넌트를 지닌 오브젝트를 모두 Destroy한다.

 

#4 서명 영역 검사

 

서명영역 바깥에 그려지지 않게 서명영역 내에서만 서명을 그릴수 있도록 UI인지, 태그명이 SignArea인지 검사함

 

## 최종 결과물