[앱인벤터] 그림판 만들기

그림판 만들기

---

1. 디자인

디자인을 보시면 저는 슬라이더 를 이용해서 독특하게 디자인 했어요. 슬라이더 1개당 R,G,B 값을 0~255 넣어주면 되요.

레이블이나 버튼의 속성은 크게 변경해줄 부분이 없는데 슬라이더는 필수로 변경해줘야 하는 부분이 있어요.

• 왼쪽색상 부분은 R : 빨강 , G : 초록 , B : 파랑 으로 지정
• 너비 : 부모 요소에 맞추기… (컴퓨터 화면에서는 변화없지만 폰에서는 정상)
• 최댓값 : 255 , 최솟값 : 0
• 섬네일 위치 : 0

슬라이더의 최댓값과 최솟값은 변경해주는 이유에 대해서 알려드리기 전에 RGB 에 대해 간단히 읽고 오시면 좋아요.
RGB를 통해 색상을 만들수 있고, 각각의 범위가 0~255 이기에 최댓값과 최솟값을 변경해주셔야 해요.
또한, 섬네일 위치를 전부 0으로 해준 이유는 처음엔 검정색이 좋기 때문이죠…

---

디자인 구조

┗ Screen1
…┗ 캔버스1
…┗ 수직배치1
……┗ 수평배치1
………┗ 레이블 R
………┗ 슬라이더 R
……┗ 수평배치2
………┗ 레이블 G
………┗ 슬라이더 G
……┗ 수평배치3
………┗ 레이블 B
………┗ 슬라이더 B
……┗ 수평배치4
………┗ 레이블 선굵기
………┗ 슬라이더 선굵기
……┗ 수평배치5
………┗ 버튼 미리보기
………┗ 버튼 랜덤
…가속도센서1

이미지에서 수평배치4 와 수평배치5 이름 차이라서 상관없어요.

---

2. 블록코딩

한글버전

영어버전

ⓐ 부분

어플을 켰을 때, 선굵기(캔버스)와 미리보기(버튼)을 지정

ⓑ 부분

변수(현재 색상)을 생성 및 색상 입력

ⓒ 부분

캔버스를 드래그(선 그리기)을 했을 때, 캔버스에 선 그려주기

ⓓ 부분

가속도센서를 이용한 스마트폰이 흔들리면 캔버스 초기화

ⓔ 부분

선굵기(슬라이더)가 변경되면 캔버스 선두께 변경

ⓕ 부분

• 랜덤(버튼)을 클릭하면 R,G,B의 값을 0~255 난수로 지정
• 변경된 R,G,B 값을 색상 슬라이더에도 적용

ⓖ 부분

색상 슬라이더가 변경되면 슬라이더의 위치만큼 색상 변경.

ⓗ 부분

색상 슬라이더가 변경되면 슬라이더의 위치만큼 색상 변경.

ⓘ 부분

색상 슬라이더가 변경되면 슬라이더의 위치만큼 색상 변경.

---