이번에는 사진을 찍고 메모를 추가해서 SNS로 보낼 수 있는 앱을 만들어 보려고 한다.
1. 아이디어
- 사진을 찍는다.
- 메모를 한다.(Canvas를 통한 글쓰기)
- SNS로 공유
2. 디자인
사용하는 주요 컴포넌트는 다음과 같다.
Camera
Sharing
Canvas
Slider
위와 같이 사진을 표시할 Canvas를 맨 위에 두고 아래에 각종 기능을 수행할 버튼들을 HorizontalScrollArrangement 두 개를
이용하여 구성해준다. 보이지 않는 컴포넌트로는 Camera와 Sharing 컴포넌트가 있으며, 이는 각각
Media 항목과 Social 항목에 존재니 참고 바란다.
3. 코딩
우선 컨버스에 메모를 할 때 색상을 변경하는 버튼을 구현해보자.
간단하다. 클릭블록에 컨버스의 프린트컬러를 각 색 별로 지정해 주기만 하면된다.
다음은 사진찍기 버튼의 구현이다.
사진찍기 버튼을 누르면 사진을 찍을 수 있게 TakePicture블록을 불러와주고,
사진을 찍은 후의 기능은 찍은 사진을 컨버스 위에 올리는 것이다. 컨버스의 BackgroundImage를 이용해 구현해 주자.
또 지우기 버튼은 간단하게 컨버스의 클리어를 불러와 주면 된다.
메모를 할 때 그려지는 선의 두께 지정과 SNS 공유 버튼을 구현해 보자.
우선 선의 두께를 담아줄 변수를 하나 생성해주고 Silder가 움직이면 정수로 값을 받아줄 수 있도록 만든다.
Slider의 최솟값과 최댓값은 각각 1과 20으로 지정해 주었다.
그리고 받은 값을 바로 LineWidth로 지정해 주고 선 두께를 표시해 주는 레이블이 변경되도록 만들어 준다.
SNS 공유 버튼 같은 경우, 버튼이 클릭 되었을 때 Share되는 파일을 Canvas의 저장을 값으로 주면 된다.
마지막으로 메모기능의 구현이다.
4. 테스트
NOX로 돌려보니 카메라를 제외한 모든 기능이 제대로 작동한다.
(윈도우PC가 카메라가 없는 관계로)
잘못된 정보나 오류, 오타, 독자 입장에서의 수정사항 및 피드백 환영합니다.
E-mail : jhmh0226@gmail.com
'Project > App Inventer' 카테고리의 다른 글
| A11. Country Capital Continent(File read & write) (0) | 2021.05.24 |
|---|---|
| A10. SOS (with. Location Sensor) (0) | 2021.05.17 |
| A09. 회원가입 및 로그인(with. TineyWebDB) (0) | 2021.05.11 |
| A08-2. WaterHolic (0) | 2021.05.05 |
| A08-1. To_Do_List(aka. 구매 리스트) (0) | 2021.05.04 |