앱인벤터 페인트팟2 앱(PaintPot)-큰점작은점 추가
앱인벤터 홈페이지에 나와 있는 튜터리얼을 참고해서 작성한 것이다. 튜터리얼의 목적은 앱인벤터의 많은 블록은 이해하고 활용할 수 있도록 도와주는 프로그램들로 구성되어 있다.
이번 튜터리얼은 도화지 앱이다. 캔버스 위에 낙서하는 앱을 만들어보자. 도화지앱과 유사하며 기능이 몇가지 추가되어서 실습을 하려고 한다. 먼저 페인트팟 앱을 만드는 것을 추천한다. 그리고 나서 페인트팟2 앱을 작성할 것을 추천한다.
앱인벤터 페인트팟 앱(PaintPot)
앱인벤터 페인트팟 앱(PaintPot) 앱인벤터 홈페이지에 나와 있는 튜터리얼을 참고해서 작성한 것이다. 튜터리얼의 목적은 앱인벤터의 많은 블록은 이해하고 활용할 수 있도록 도와주는 프로그램
flycoding.tistory.com
기존의 기능에 대한 설명은 페인트팟의 것을 참조하시고, 이번 글에서는 변수를 활용하여 큰점과 작은 점을 그리는 방법에 대해 실습하고자 한다.
페인트팟2 앱에서 추가로 제공하는 기능은 다음과 같다.
- 변수를 활용하여 큰점과 작은 점을 그려보자
페인트팟 앱을 작성의 목적은
- 변수 선언과 관리를 할 수 있다.
자, 이제 시작해보자...
. 페인트팟 기본 설계
캔버스 컴포넌트를 활용한다.
캔버스 컴포넌트에서 제공하는 드래그 이벤트, 터치 이벤트를 활용하여 캔버스 위에 선을 그려보자.
여기서는 버튼 컴포넌트 3개를 통해 각각 빨간색, 초록색, 파란색을 설정한다.
아래 버튼 컴포넌트 3개는 각각 지우기, 큰점, 작은점의 기능을 한다.
. 페인트팟 디자인
앱인벤터의 페인트팟의 화면 디자인은 아래 그림과 같다.
캔버스 컴포넌트와 색을 지정하는 3개의 컴포넌트 그리고 아래3개의 버튼은 지우기, 큰점, 작은점을 설정하는 기능을 한다.
캔버스 컴포넌트에는 고양이 그림을 이미지에 설정한다.
컴포넌트
앱인벤터 구성 요소는 디자이너 창의 왼쪽 팔레트 제목에 있다. 컴포넌트는 안드로이드 폰이나 아이폰에서 앱을 만들 때 사용하는 기본 요소이다. 화면에 캔버스 컴포넌트와 버튼 컴포넌트 6개, 수평배치 컴포넌트 2개를 사용할 것이다.
캔버스 컴포넌트 설정값 설정하기
캔버스 컴포넌트에 알고 싶으면 아래 글을 참고하세요
앱인벤터 캔버스 컴포넌트
앱인벤터 캔버스 컴포넌트 앱인벤터의 컴포넌트들을 이해와 실제 예제를 통해 실습을 통해 모바일 앱 개발에 활용도를 높이고자 한다. 이번 시간에는 앱인벤터의 캔버스 컴포넌트를 활용하여
flycoding.tistory.com
캔버스의 높이 : 300
캔버스의 너비 : 부모 요소에 맞추기
이미지 : kttty.png
캔버스 컴포넌트에서 드래그하면 선을 그리는 작업을 할 것이다.
캔버스 컴포넌트에서 점을 찍을 수 있다.
캔버스에 빨간색, 초록색, 파란색의 페인트색상을 지정한다.
버튼 컴포넌트 설정값 설정하기
화면 위에 3개의 버튼은 색상을 지정하기 위해 사용된다. 색상은 빨간색, 초록색, 파란색을 설정한다.
빨간색 버튼 : 텍스트(Red), 배경색(빨간색), 정렬(가운데정렬)
초록색 버튼 : 텍스트(Red), 배경색(초록색), 정렬(가운데정렬)
파랑색 버튼 : 텍스트(Red), 배경색(파랑색), 정렬(가운데정렬)
수평배치컴포넌트 설정값 설정하기
화면 위에 3개의 버튼을 수평하게 배치하기 위해 사용된다.
수평정렬 : 가운데
수직정렬 : 가운데
너비 : 부모요소에 맞추기
지우기 버튼 컴포넌트 설정값 설정하기
화면 아래에 1개의 버튼은 캔버스의 그림을 모두 지우는 기능을 위해 사용된다.
텍스트 : Wipe
텍스트정렬 : 가운데
큰점 버튼 컴포넌트 설정값 설정하기
큰점 버튼을 클릭하면 캔버스에 큰 점을 그린다.
작은점 버튼 컴포넌트 설정값 설정하기
작은점 버튼을 클릭하면 캔버스에 작은 점을 그린다.
설계 아이디어
기본 생각
큰점 작은점을 그리기 위해 변수를 사용한다고 하였다.
기존에 원그리기에서 반지름이 5인 원을 그렸다.
이제 반지름 5 값을 변수 "점크기"로 설정하고 점크기 값을 변화를 주어 반지름 크기를 큰점, 작은 점을 입력할 수 있도록 한다.
자 그럼 변수는 언제 설정할 수 있을까?
. 앱을 초기화할 때(초기값은 5이다)
. 작은점 버튼을 클릭할 때 '점크기' 변수를 5로 설정한다.
. 큰점 버튼을 클릭할 때 '점크기' 변수를 10으로 설정한다.
코딩블럭
블록 코딩은 정말 간단한다.
우리가 무엇을 할 것인지 생각해보라.
캔버스 컴포넌트를 배치하고,
스마트폰 화면 위에 손을 드래그한다.
-> 캔버스에서 드래그 이벤트에서 원하는 작업을 하면 된다.('드래그' 블록)
-> 우리는 여기에 선을 그릴 것이다.('선그리기' 블록)
스마트폰 화면 위에 손을 드래그한다.
-> 캔버스 위에 점을 찍을 때에는 (터치했을때와 원그리기 블록을 활용한다.)
추가로 캔버스의 색을 설정하기 위해 빨간색, 초록색, 파란색 버튼을 터치한다.
-> 캔버스의 페인트 색상을 지정한다.
. 전역변수
점크기
. 초기화 : 5
위에서도 설명하였지만, 점크기 변수는 큰점과 작은 점 버튼일 클릭했을 때, 점크기 변수 값을 각각 5, 10으로 변경한다.
그러면 원그리기에서 '반지름'값에 점크기 변수값을 설정하는데 작은점인 경우에는 5, 큰점인 경우에는 10으로 원을 그릴 것이다.
. 캔버스 터치했을때(점 찍기)
캔버스 컴포넌트 위에 터치하면 원그리기 블록을 통해 캔버스 위에 작은 점처럼 보이게 한다. (실제로는 원그리기임을 기억하자.)
원그리기에는 터치했을 때의 X, Y좌표를 원그리기 중심 X, Y좌표로 활용하고
기존 페인트팟 앱에서는 반지름에는 반지름 5로 고정하여 원을 채워서 그린다.
그러나 반지름 값에 점크기 변수를 활용하여 큰점/작은점으로 값을 변화를 주어 캔버스 위에 원을 유동적으로 그릴 수 있게 되었다.
. 큰점 버튼을 클릭했을때
큰점 버튼을 클릭했을 때에 전역변수 점크기 변수에 10 값을 지정하여 사용자가 캔버스 위를 터치했을 때 반지름이 10 크기인 원을 그릴 것이다.
. 작은점 버튼을 클릭했을때
작은점 버튼을 클릭했을 때에 전역변수 점크기 변수에 5 값을 지정하여 사용자가 캔버스 위를 터치했을 때 반지름이 5 크기인 원을 그릴 것이다.
실행결과 화면
앱인벤터의 도화지 앱을 작성하였다. 실행 결과 화면은 아래와 같다.
첫번째 화면은 앱이 처음 구동되었을 때 화면이다.
빨간색과 파란색을 각각 선택하여 점을 그린 화면이다.
초록색 버튼을 클릭하여 초록색 점을 찍은 화면이다.
큰점을 클릭하였을 때 큰점을 찍은 화면이다.
아래는 앱인벤터 도화지앱의 실행 동영상이다.
좀더 생각해보기
'페인트팟2' 앱에서 몇가지 기능을 추가해보자.
. 점의 크기를 동적으로 바꾸어 보자.
- 슬라이더로 점의 크기를 조절해보자.
. 카메라로 찍은 사진을 캔버스의 배경 이미지로 설정해 보자.
. 번역해주는 언어를 선택하고 번역하는 앱을 만들어보자
다음 글에 추가해서 작성을 해 볼 것이다.
지금까지 '페인트팟2' 앱을 작성하였다. 캔버스와 버튼 그리고 수평배치 컴포넌트를 통해 간단한 페인팅 그리기 앱을 작성해보았다. 블록코딩을 처음한 경험을 살려 다음 튜터리얼도 계속 실습하기를 추천한다.
눈으로 보는 것과 직접 실행하며 하는 것은 완전히 달라요.
간단하지만 직접 해보면 이해하고 자신감이 생길거에요...
Just Do It!!!
Just Drag&Drop It!!!
감사합니다.
'앱인벤터 > 앱인벤터 코딩따라하기' 카테고리의 다른 글
| 앱인벤터 오마이스파이크 앱-설계편 (0) | 2022.11.15 |
|---|---|
| 앱인벤터 페이크 보이스(Fake Voice) 앱 (0) | 2022.10.21 |
| 앱인벤터 페인트팟 앱(PaintPot) (0) | 2022.10.18 |
| 앱인벤터 멀티스크린 도화지 앱(multi screen)-코딩편 (0) | 2022.10.16 |
| 앱인벤터 멀티스크린 도화지앱(multi-screen)-설계편 (1) | 2022.10.15 |
댓글